Why is my javascript add class to turn an image display to none not working?

Question

Here is my html code:

And here is my javascript:

let links = document.querySelectorAll('#list li')
links.forEach((el) => {
  el.addEventListener('click', (event) => {
    let numberOfChoices = event.target.innerText
    document.getElementById('dropdownMenu1').innerHTML = `${numberOfChoices}`
    console.log(numberOfChoices)

    // Showing Correct Number of Boxes
    if (numberOfChoices === 2) {
      document.querySelectorAll(".img3").classList.add(".invisible");
    }
  })
})

and this is the css:

.invisible{display: none;}

If 2 is selected on the dropdown button, I want image with class img3 to be disappear. Why is it not working can someone help please thanks in advance

user_7120471 · Answer

By looking at your codeI found out that you had three issues that prevented the image to be hidden when adding the class.

First is that you where comparing a string with an int, son that is the first change you need to do.

Second you were calling the querySelectorAll(".img3") which prevents you from getting the classListproperty before doing a forEach() on the result, so you need to change it to querySelector(".img3").

And the last issue is that you were adding .invisible class which would look like

and you should just add the name of the class invisible.

Here is the code with the fixes:

let links = document.querySelectorAll('#list li')
links.forEach((el) => {
  el.addEventListener('click', (event) => {
    let numberOfChoices = event.target.innerText
    document.getElementById('dropdownMenu1').innerHTML = `${numberOfChoices}`
    console.log(numberOfChoices)

    // Showing Correct Number of Boxes
    if (numberOfChoices === "2") { // <------- fix 1
      var element = document.querySelector(".img3"); // <------ Fix 2
      element.classList.add("invisible"); // <------ Fix 3
    }
  })
})

.invisible {
  display: none;
}

------------------- UPDATE FOR JQUERY ------------------------

If you would like to use JQuery and tied up the code a little more here is the changes on the code you will need to make. In this code you will first need to add JQuery to your code as a script, be it pulling the js from the cloud or by downloading the latest version.

Once JQuery is working we would need to change the way we get the elements from using document.querySelector('selector') to $('selector'), which is the way JQuery handles element selection.

As JQuery does not differentiate the way to get one and all elements, the code works different. If it finds more than one element it handles the return as an array that you can work directly without calling forEach or each. So here is the second change.

The last change is the one you already suggested on the comments. To be able to select various elements with different classes or ids just use the , separator inside the selector and then the addClass method.

$(document).on('click', '#list li', function(event) {
  let numberOfChoices = event.target.innerText
  $('#dropdownMenu1').html(numberOfChoices + "")
  console.log(numberOfChoices);

  // Showing Correct Number of Boxes
  if (numberOfChoices === "2") {
    $(".img3, .img4").addClass("invisible");
  }
})

.invisible {
  display: none;
}

Why is my javascript add class to turn an image display to none not working?

1 Answers