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
?
source to share
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';
}
source to share
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>
source to share
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.
<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>
source to share
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>
source to share