JavaScript onclick requires two clicks

Question

My problem is that when onclicktriggers the toggleNew function it\'s not executing but when I click the div a second time it\'s execut

Answer 1

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>

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

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 4

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 5

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 6

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>