JavaScript onclick requires two clicks

问题

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?

回答1:

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';
    }

回答2:

You need to call the function like onclick="toggleNew();" in the div onclick. I just added your code in fiddle.

回答3:

May not be the best answer, but the fix was to use inline css by style attribute. Like this:

<div id="aside_main" style="display: block; border: 2px solid green;">
     <div onclick="toggleNew();">click</div>
     content
</div>
<div id="aside_new" style="display: none; border: 2px solid red;">
     content
</div>

回答4:

e.style.display represents the style of the element defined by the style attribute, it does not give you the computed style. to get the computed style use

if (window.getComputedStyle(e,null).getPropertyValue("display") == 'block){

回答5:

In your condition : Use onclick="toggleNew();" // calling

This is the way to call a function.

And if you want to Pass the function then you use only toggleNew //passing

They are two different activities.

回答6:

Here is another way of doing that. You just need to add two lines to your javascript code-

    document.getElementById('aside_main').style.display='block';
    document.getElementById('aside_new').style.display='none';

set initial display property in javascript. This will work fine.

回答7:

I had the same double click required issue. I was using an internal style sheet which was correctly setting the display like this. When loading the HTML file #YourID was not visible as expected.

#YourID {
    display: none;
}

When clicking the button tied to the function I noticed that the first click set the inline display to style="display: none;". The second click set the inline style="display: block;" and of course then it displayed as expected.

I found that I needed to set the element directly inline with style="display: none;" and just removed the intern style sheet entry (Above "#YourID").

I'm doubtful that this is 100% the correct answer in every scenario but it would seem the underlying issue is caused by the element not being set in the appropriate initial state for the function to act on it properly.

https://jsfiddle.net/em05a1kf

<div id="YourID" style="display: none;">
<b>Super Hidden Content</b>
</div>

<button onclick="ToggleID('YourID');">Do Foo</button>

<script type="text/javascript">
function ToggleID(idname) {
    var x = document.getElementById(idname);
    (x.style.display === "none") ? (x.style.display = "block") : (x.style.display = "none");
    return false;
}
</script>

回答8:

One way (for me the simplest way) to solve this is by counting clicks.

For this purpose you set the new intiger variable click to 0 outside of your function toggleNew() and everytime you call your function you increase variable click for 1 like this:

<script> var click = 0;
         function toggleNew() { 
         click = click +1;
         var e = document.getElementById('aside_main');
         var se = document.getElementById('aside_new');
         if (click > 1) {
                         if(e.style.display == 'block') {
                                                     e.style.display = 'none';
                                                     se.style.display = 'block';
                            } else {
                                     e.style.display = 'block';
                                     se.style.display = 'none';
                                    }        
          } else {    
                  e.style.display = 'none';
                  se.style.display = 'block';
                  }
        }
</script>

来源：https://stackoverflow.com/questions/21852932/javascript-onclick-requires-two-clicks

标签

javascript

html

onclick