CODEWITHSUNDEEP
javascripthtmlcsseventsclick
M. Vlad
M. Vlad

Reputation: 137

Onclick javascript function working only 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 dropdownText div only shows up after a second click on the arrowRight span. I have seen it as a common problem, but still failed in finding a solution. Any help would be appreciated.

Upvotes: 4

Views: 3889

Answers (4)

Safnas
Safnas

Reputation: 153

Just adding to approved answer.

Check for showElement.style.display == ''.
Additionally, for switching to flex on first click itself, if you are using display = 'none' as default.

Example:

..
if (showElement.style.display == 'none' || showElement.style.display == '') {
..

if the style of text is display = 'none'.

Upvotes: 2

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48337

You do not need to bind a click event handler inside another click event handler. You have to use a single click event handler.

The show/hide functionality belongs to second click event handler and this is binded to your span DOM element after 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>

Upvotes: 6

prasanth
prasanth

Reputation: 22490

remove the arrowElement.onclick = function() {}

Why?

you have already apply the function in onclick=toggleDivFunction() with arrowRight .so first execute the toggleDivFunction() then to perform the Dom arrowElement.onclick .use any one of the onclick function ,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>

Upvotes: 0

Jonas Wilms
Jonas Wilms

Reputation: 138235

You want to assign your event handlers earlier:

window.onload=toggleDivFunction;

and remove the onclick='toggleDivFunction()', its unneccessary then and oldfashioned.

Your code assigns a listener when an event is triggered (toggleDivFunction). To trigger the listener (arrowElement.onclick) you need to cause another event doing a second click.

Upvotes: 0

Related Questions