欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JS点击

程序员文章站 2023-01-01 22:52:22
本来是想做一个鼠标点击事件：A,B两个东西，B先隐藏，点击A，B出现，再点一次A，B消失，然后发现在判断不同的情况下，出现了一点小问题 暂时没有问题的写法： 然后，我把它的判断条件改了一下,其实这是我第一次写的想法： 然后它的效果是，第一次点击的时候没有反应，要点第二次，B才会出来，有点不明白 ......

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

上一篇： 胃疼怎么缓解？ 中医推荐拔火罐治胃痛

下一篇： 有眼袋毁颜值！中医按摩这穴位有效消除

推荐阅读