Clever Geek Handbook

JavaScript onclick requires two clicks

My problem is when it onclick

runs a function toggleNew

it doesn't execute, but when I click div

a second time it executes 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's going on here and how do I get the function to work on the first click by the user div

?

0


source to share


8 answers


This won't work as expected because you are using the following line inside the 'div # aside_main' which will be hidden.

 <div onclick="toggleNew();">click</div>

Try to leave it outside of this -

<div onclick="toggleNew();">click</div>
 <div id="aside_main">
  content
 </div>
 <div id="aside_new">
  content2
</div>


Also in javascript it doesn't check "e.style.display" the first time in an if clause.

Try to use

    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


source


e.style.display

represents the style of the element specified by the style attribute, it does not give you the computed style. to use the computed style



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


source


You need to call the function like onclick="toggleNew();"

in the onclick div. I just added your code to the fiddle .

+1


source


May not be the best answer, but the fix was using inline css on the 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>
+1


source


In your state: use onclick="toggleNew();"

// call

This is the way to call a function.

And if you want to Skip a function, then you only use toggleNew

// pass

These are two different actions.

0


source


Here's another way to do it. 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.

0


source


I had the same double click problem. I used an internal stylesheet that set up the display correctly as follows. When loading the HTML file, #YourID was not visible as expected.

#YourID {
    display: none;
}

On clicking on the button bound to the function, I noticed that the first click for the inline display is set style="display: none;"

, the second click is set inline style="display: block;"

and of course then it is displayed as expected.

I found that I need to set the element directly to the line with style="display: none;"

and just deleted the intern stylesheet entry (above "#YourID").

I doubt this is 100% correct in every scenario, but it might seem that the underlying problem is caused by the element not being set to 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>
0


source


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

To do this, you set a new intiger click variable to 0 outside of your toggleNew () function, and each time you call your function, you increment the click variable by 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>
0


source






More articles:


All Articles