Onclick javascript function only works on second click
function toggleDivFunction() {
var arrowElement = document.getElementById("arrowRight");
var showElement = document.getElementById("dropdownText");
arrowElement.onclick = function() {
if (showElement.style.display == 'none') {
showElement.style.display = 'block';
document.getElementById("arrowRight").style = "transform: rotate(+90deg)";
} else {
showElement.style.display = 'none';
document.getElementById("arrowRight").style = "transform: rotate(0deg)";
}
}
}
<p class="dropdownHeader">TOP <span id="arrowRight" class="arrowRight" onclick="toggleDivFunction();"> > </span></p>
<div class="dropdownText" id="dropdownText"><p>TEXT TO BE SHOWN</p></div>
The problem is that the div dropdownText
is only shown after the second click on the range arrowRight
. I saw this as a common problem, but still couldn't find a solution. Any help would be greatly appreciated.
source to share
You don't need bind
a click
event handler in another event handler click
. You must use one event handler click
.
The functionality show/hide
belongs to the second event handler click
, and that's binded
for your span
DOM element after the first click
.
function toggleDivFunction () {
var arrowElement = document.getElementById ("arrowRight");
var showElement = document.getElementById ("dropdownText");
if(showElement.style.display == 'none')
{
showElement.style.display = 'block';
document.getElementById("arrowRight").style = "transform: rotate(+90deg)";
}
else
{
showElement.style.display = 'none';
document.getElementById("arrowRight").style = "transform: rotate(0deg)";
}
}
<p class="dropdownHeader">TOP <span id="arrowRight" class="arrowRight" onclick="toggleDivFunction();"> > </span></p>
<div class="dropdownText" id="dropdownText">
<p>TEXT TO BE SHOWN</p></div>
source to share
You want to assign event handlers earlier:
window.onload=toggleDivFunction;
and remove onclick = 'toggleDivFunction ()', its unnecessary then and oldfashioned.
Your code assigns a listener when the event is triggered (toggleDivFunction). To trigger the listener (arrowElement.onclick), you need to trigger another event by making a second click.
source to share
remove arrowElement.onclick = function() {}
Why?
you have already applied the function in
onclick=toggleDivFunction()
witharrowRight
.so first executetoggleDivFunction()
then executeDom
arrowElement.onclick
. Use either of the onclick functions, not both
function toggleDivFunction() {
var arrowElement = document.getElementById("arrowRight");
var showElement = document.getElementById("dropdownText");
if (showElement.style.display == 'none') {
showElement.style.display = 'block';
document.getElementById("arrowRight").style = "transform: rotate(+90deg)";
} else {
showElement.style.display = 'none';
document.getElementById("arrowRight").style = "transform: rotate(0deg)";
}
}
<p class="dropdownHeader">TOP <span id="arrowRight" class="arrowRight" onclick="toggleDivFunction();"> > </span></p>
<div class="dropdownText" id="dropdownText">
<p>TEXT TO BE SHOWN</p>
</div>
source to share