当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS点击

JS点击

2019年09月06日  | 移动技术网IT编程  | 我要评论

本来是想做一个鼠标点击事件：a,b两个东西，b先隐藏，点击a，b出现，再点一次a，b消失，然后发现在判断不同的情况下，出现了一点小问题

暂时没有问题的写法：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>document</title>
 6     <style type="text/css">
 7         #div1{
 8             width: 50px;
 9             height: 200px;
10             background-color: orange;
11             display: none;
12         }
13     </style>
14     <script type="text/javascript">
15     function showhide(){
16         var a=document.getelementbyid("div1")
17         if (a.style.display=="block") {
18             a.style.display="none";
19         }
20         else{
21             a.style.display="block";
22         }
23     }
24     </script>
25 </head>
26 <body>
27     <input type="button" value="显示隐藏" onclick="showhide()">
28     <div id="div1"></div>
29 </body>
30 </html>

然后，我把它的判断条件改了一下,其实这是我第一次写的想法：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>document</title>
 6     <style type="text/css">
 7         #div1{
 8             width: 50px;
 9             height: 200px;
10             background-color: orange;
11             display: none;
12         }
13     </style>
14     <script type="text/javascript">
15     function showhide(){
16         var a=document.getelementbyid("div1")
17         // 这里改变了
18         if (a.style.display=="none") {
19             a.style.display="block";
20         }
21         else{
22             a.style.display="none";
23         }
24     }
25     </script>
26 </head>
27 <body>
28     <input type="button" value="显示隐藏" onclick="showhide()">
29     <div id="div1"></div>
30 </body>
31 </html>

然后它的效果是，第一次点击的时候没有反应，要点第二次，b才会出来，有点不明白

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网