Onclick javascript function working only on second click

Question

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.

just remove this: arrowElement.onclick = function() { } You are adding an event listener in the function that's supposed to capture your event. No big deal! — Oussama Ben Ghorbel
– Oussama Ben Ghorbel, Commented Apr 22, 2017 at 9:12

Mihai Alexandru-Ionut · Accepted Answer · 2017-04-22 10:11:33Z

6

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>

edited Apr 22, 2017 at 10:11

answered Apr 22, 2017 at 9:10

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Henfs · Accepted Answer · 2020-03-18 13:47:20Z

2

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'.

edited Mar 18, 2020 at 13:47

Henfs

5,47912 gold badges33 silver badges48 bronze badges

answered Mar 18, 2020 at 13:19

Safnas

1532 silver badges11 bronze badges

Comments

Jonas Wilms · Accepted Answer · 2017-04-22 09:09:20Z

0

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.

answered Apr 22, 2017 at 9:09

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Comments

prasanth · Accepted Answer · 2017-04-22 09:17:42Z

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>

Collectives™ on Stack Overflow

Onclick javascript function working only on second click

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related