JS点击

Posted 2022-10-05 jiushui

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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才会出来，有点不明白

以上是关于JS点击的主要内容，如果未能解决你的问题，请参考以下文章