为什么我的js一开始需要点击两次才能触发,之后点击一次就可以了。麻烦帮忙解决一下

我写了一段原生js,通过单击按钮来使div显示与隐藏,var anniu=document.getElementById('anniu')var div1=document.getElementById('div1')var div2=document.getElementById('div2') anniu.onclick=function(){ if(div1.style.display=="block"){ div1.style.display="none"; div2.style.display="block"; }else{ div1.style.display="block"; div2.style.display="none"; } }但是第一次点击按钮是获取这个按钮,再点击一下才会执行,之后点击一次就可以了,请问该怎么改才能一开始点击一次就可以。还有就是这段代码用jquery该怎么写?

有一种情况可能是因为网页中的某些JavaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,当第一次点击时文档才加载完毕;所以第二次点击时才有反应。为了避免类似情况的发生,可以使用以下两种方式:
(1).将脚本代码放在网页的底端,运行脚本代码的时候,可以确保要操作的对象已经加载完成。
(2).通过window.onload来执行脚本代码。
温馨提示:内容为网友见解,仅供参考
第1个回答  2017-02-21
如果这个功能有jQuery写的话会非常简单。
js的话,我需要一段时间来想想_(:з」∠)_追问

这段js用jq该怎么写?

追答<!doctype html>
<html>
  <head>
  <title>demo</title>
  <meta charset="utf-8"/>
  <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
  <style type="text/css">




  </style>
  <script>
$(function(){
$(".btn1").click(function(){
$(".t1").toggle();
$(".t2").toggle()
})
})
  
  </script>
  </head>
  <body>
   <div class="t1"><h1>这是一个div</h1></div>
<div class="t2" style="display: none;"><h1>这是另一个div</h1></div>
<button class="btn1">点击隐藏第一个div,显示第二个div,再次点击效果切换</button>



  </body>


</html>

效果是在开始显示第一个div点击按钮后隐藏第一个显示第二个,再点击隐藏第二个显示第一个

本回答被提问者采纳

为什么我的js一开始需要点击两次才能触发,之后点击一次就可以了...
有一种情况可能是因为网页中的某些JavaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,当第一次点击时文档才加载完毕;所以第二次点击时才有反应。为了避免类似情况的发生,可以使用以下两种方式:(1).将脚本代码放在网页的底端,运行脚本代码的时候,可以确保要操作...

【C#】为什么我做的按钮要双击两次,才能响应事件?
大多数情况下,js的函数参数只应该和客户端有关,之多是页面加载的时候赋值一些全局变量,比如当前用户的id,否则就要考虑设计是否合理了 就楼主的案例,需要了解LineNo Part_name Location 从哪里来的

JS的onclick的事件,为什么要点2次才能触发
} } var hit=spn.parentNode.style.height;定义到函数外头就不能正常运行的原因,涉及到JS的闭包,这个毕竟难解释,你可以自己查询一下“js闭包”

js中keydown键盘事件怎么只触发一次,再点击按键就不触发了?
由于标志变量的值已经改为了 `true`,所以在下次按下按键时,`keydown` 事件监听器将不会执行任何代码。如果要在第二次按下按键时结束计时,可以在 `keyup` 事件的监听器中将标志变量设为 `false`。具体代码如下:```javascript var isKeyPressed = false; \/\/ 定义一个标志变量 var startTime; ...

怎样使js中的onclick事件只触发一次,就是我点击了一次,再次点击的时 ...
解决的方法:1、用jQuery的方式 jQuery专门为此功能提供了一个函数one。这样写就能让click这个事件只执行一次。("#btn3").one('click',function(){ alert('jQuey的one函数,第1次点击');});2、不用jQuery的方式 框起来的3处都是不用jQuery实现的只触发一次的效果。核心代码是这句btn.onclick =...

如何解决js中点击了按钮一次,再按回车也会触发按钮的事件的bug
按回车之所以会再次创建是因为,你点击按钮的时候把焦点也弄到按钮上了,如果只是希望不安回车。那么用blur()事件,把焦点失去就可以了,或者focus()到另一个按钮上。如果你只是想要执行一次,那么你可以加一个公共变量当做锁。当这个变量为ture的时候,函数可以执行,函数执行一次的时候,设置这个变量为...

求教关于js连续点击事件但最终只触发一次应该怎么写
在点击事件中设置一个变量。如果发生了点击就改变这个变量。例子 var hit = false;document.body.onclick = function() { if( !hit ) { hit = true; alert( "hit" ); }};

...点击一下就打开了,再点击关闭时,要点击两下才能关闭。代码以下...
以下代码,点击第一个按钮,然后立即点击第二个按钮,第二个按钮的事件虽然触发了,但是执行效果要等到第一个效果结束才执行,所以做渐变的效果时,一定要明白执行顺序,从而确定执行速度。$(document).ready(function() { var a=-1; $(".btn1").click(function(){ if(a==-1) { $...

Js如何把两个按钮合成一个,点击循环触发效果
设置一个flag开关,点击一次改变一下flag的状态,比如默认flag为true;然后以flag的状态为判断条件,if(flag==true){执行从小到大的方法并且改变flag为false},else{执行从大到小的方法并且改变flag为true}再次点击按钮之后,此时flag状态为false,再次点击就会自行第二个方法了 ...

js每隔两秒选中下一个盒子,怎么做
1、每隔两秒点击一次右箭头鼠标经过盒子。2、停止定时器(箭头乱闪的问题解释)触发事件的一定要是外面的大盒子.3、不能是ul,如果给ul注册事件,就会出现乱闪的问题鼠标离开盒子。4、开启定时器同步功能。

相似回答