JavaScript onclick需要两次点击 [英] JavaScript onclick requires two clicks

问题描述

我的问题是，当 onclick 触发 toggleNew 函数时，它并未执行，但是当我点击<$ c

$ p













$ b

 < div id =aside_main> 
< div onclick =toggleNew（）;>点击< / div> 
 content 
< / div> 
< div id =aside_new> 
 content 
< / div> 
  

JS：

  function toggleNew（）{
 var e = document.getElementById（'aside_main'）; 
 var se = document.getElementById（'aside_new'）; 
 if（e.style.display =='block'）{
 e.style.display ='none'; 
 se.style.display ='block'; 
} else {
 e.style.display ='block'; 
 se.style.display ='none'; 
 
 
 $ / code $ / pre 
 $ b $ p $ CSS $：
 
 
  #aside_main {
 display：block; 
} 
 #aside_new {
 display：none; 
 
 $ / code> 
这里发生了什么，以及如何让函数第一次工作用户点击 div ？
解决方案
使用下面一行代码将被隐藏。
 < div onclick =toggleNew（） ;>点击< / DIV> 
  
尽量不要这样 -  
 < div onclick =toggleNew（）;>点击< / div> 
< div id =aside_main> 
 content 
< / div> 
< div id =aside_new> 
 content2 
< / div> 
  
同样在javascript中，它不会在if条件中第一次检查'e.style.display'。 
 
 
 
尝试使用 
 
 
  if（e.offsetWidth> 0 | | e.offsetHeight> 0）{
 e.style.display ='none'; 
 se.style.display ='block'; 
} 
 else 
 {
 e.style.display ='block'; 
 se.style.display ='none'; 
} 
  
 
My problem is that when onclicktriggers the toggleNew function it's not executing but when I click the div a second time it's executing just as it should...


HTML:
<div id="aside_main">
    <div onclick="toggleNew();">click</div>
    content
</div>
<div id="aside_new">
    content
</div>
JS:
function toggleNew() {
   var e = document.getElementById('aside_main');
   var se = document.getElementById('aside_new');
   if(e.style.display == 'block') {
    e.style.display = 'none';
    se.style.display = 'block';
   } else {
    e.style.display = 'block';
    se.style.display = 'none';
   }
}
CSS:
#aside_main {
  display: block;
} 
#aside_new {
  display: none;
}
What is happening here and how can I make the function work the first time a user clicks the div?
解决方案
This will not work properly because you are using following line inside  'div#aside_main' which is going to be hidden.
 <div onclick="toggleNew();">click</div>
Try keeping it outside like this-
<div onclick="toggleNew();">click</div>
 <div id="aside_main">
  content
 </div>
 <div id="aside_new">
  content2
</div>
Also in javascript it is not checking for 'e.style.display' first time in if condition.

Try using
    if(e.offsetWidth > 0 || e.offsetHeight > 0){
      e.style.display = 'none';
      se.style.display = 'block';
    }
    else
    {
      e.style.display = 'block';
      se.style.display = 'none';
    }


                        
这篇关于JavaScript onclick需要两次点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！