Why does my JS 'click event' only run once?-CodePudding

I created a click event that opens a previously 'hidden' div and closes it again once you click the same button.

However, it only runs once (one open and one close) - I'm at a loss to explain why it doesn't work if I click it again.

let readMore = document.getElementById('clickAbout');
let moreInfo = document.getElementById('about');
let changeSepa = document.getElementById('sepChange');


readMore.addEventListener('click', function(){
    changeSepa.style.height = '2rem';
    if (moreInfo.className == "") {
        moreInfo.className = "open";
        moreInfo.style.display = 'block';
    } else {
        
            moreInfo.style.display = 'none';
    }
});

CodePudding user response：

You should change your staement, It does not enters if statement in second click.

You can check with adding console.log() to see.

readMore.addEventListener('click', function(){
    changeSepa.style.height = '2rem';
    if (moreInfo.className == "") {
        moreInfo.className = "open";
        moreInfo.style.display = 'block';
        console.log("Button Click display block");
    } else {
            moreInfo.className = "";
            moreInfo.style.display = 'none';
            console.log("Button click display none");
    }
});

Also I recommend using classList instead of className

Here

readMore.addEventListener('click', function(){
    changeSepa.style.height = '2rem';
    if (moreInfo.classList.contains("open") != true) {
        moreInfo.classList.add("open");
        moreInfo.style.display = 'block';
        console.log("Button Click display block");
    } else {
        
            moreInfo.classList.remove("open");
            moreInfo.style.display = 'none';
            console.log("Button click display none");
    }
});

CodePudding user response：

this happens because you're checking if className == "", but you are modifying the className to be "open". On the second click it checks the className which is now "open" and goes to the else block. On the third click you expect for it to go into the first block but the className is still "open".

For an easy fix just change the className in the else block

else {
  moreInfo.className = "";  
  moreInfo.style.display = 'none';
}

Also i suggest you make use of the classList property on elements https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

using the class list it could look like this:

readMore.addEventListener("click", function () {
  changeSepa.style.height = "2rem";
  if (moreInfo.className == "") {
    moreInfo.classList.add("open");
    moreInfo.style.display = "block";
  } else {
    moreInfo.classList.remove("open");
    moreInfo.style.display = "none";
  }
});

Or even

readMore.addEventListener("click", function () {
  changeSepa.style.height = "2rem";
  moreInfo.classList.toggle("open");
  if (moreInfo.className == "") {
    moreInfo.style.display = "block";
  } else {
    moreInfo.style.display = "none";
  }
});