JS点击

本来是想做一个鼠标点击事件：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才会出来，有点不明白

posted @ 2019-09-06 15:35  New7  阅读(430)  评论(0)  编辑  收藏  举报