JavaScript onclick requires two clicks

Question

My problem is that when onclick triggers 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 ?

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

Answer 2

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){

Answer 3

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

Answer 4

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>

Answer 5

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>

Answer 6

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.

Answer 7

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.

Answer 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>