CODEWITHSUNDEEP
javascript
user14312722
user14312722

Reputation:

how to make multiple click events on the same element?

How can I use several click events on the same element in JavaScript?

I try to make that when I click on the h3 element it opens its description and then I again click on the element it closes the description. 

var p, img,  question;

    function clickOn(){
        img = document.getElementsByClassName('down-arrow')[0];
        p = document.querySelectorAll('p')[0];
        p.setAttribute('class','show-text');
        /*img.setAttribute('class','show');*/
    }

     function clickOff(){
        img = document.getElementsByClassName('down-arrow')[0];
        p = document.querySelectorAll('p')[0];
        p.removeAttribute('class','show-text');
        /*img.removeAttribute('class','show');*/
        } 


    question = document.getElementsByClassName('question')[0];

    question.addEventListener('click', clickOn, false);
    question.addEventListener('click', clickOff, false);

Upvotes: 0

Views: 78

Answers (2)

gubnich
gubnich

Reputation: 61

Try using toggle for adding and removing class https://www.w3schools.com/howto/howto_js_toggle_class.asp:

var p, img,  question;

function clickOn(){
    img = document.getElementsByClassName('down-arrow')[0];
    p = document.querySelectorAll('p')[0];
    p.classList.toggle('show-text');
}

question = document.getElementsByClassName('question')[0];

question.addEventListener('click', clickOn, false);

Upvotes: 1

Ahmad Habib
Ahmad Habib

Reputation: 2384

You can declare a global variable

var isTextDisplayed = false;

Then you can call same event listener and open or close the description on basis of the bit. For example

document.getElementById("myBtn").addEventListener("click", function() {
  if(!isTextDisplayed) {
    //HIDE DESCRIPTION CODE
  }
  else {
    //SHOW DESCRIPTION CODE
  }
  isTextDisplayed = !isTextDisplayed;
});

Full code:

var isTextDisplayed = false;
var description = document.getElementById("description");
document.getElementById("myBtn").addEventListener("click", function() {
      if(!isTextDisplayed) {
        description.style.display = 'none';
      }
      else {
        description.style.display = 'block';
      }
      isTextDisplayed = !isTextDisplayed;
    });
<h3 id="myBtn">CLICK TO TOGGLE DESCRIPTION</h3>

<p id="description">
  Some dummy text for description goes here in the block
</p>

For demo, see JSFIDDLE CODE

Upvotes: 0

Related Questions