After reviewing your code, I identified three issues that were causing the image to not be hidden when the class was added.
The first issue was comparing a string with an int, so you need to make the necessary changes there.
Secondly, using querySelectorAll(".img3") prevented accessing the classList property before applying a forEach() loop on the result. It should be changed to querySelector(".img3").
Lastly, adding the .invisible class resulted in a syntax error like <div class=".invisible">, instead, simply add the class name invisible.
Below is the corrected code:
let links = document.querySelectorAll('#list li')
links.forEach((el) => {
el.addEventListener('click', (event) => {
let numberOfChoices = event.target.innerText
document.getElementById('dropdownMenu1').innerHTML = `${numberOfChoices}<span class="caret"></span>`
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;
}
<div class="container-fluid instructions">
<img src="chick2.png">
<img class="img1" src="dice6.png">
<img class="img2" src="dice6.png">
<img class="img3 threeChoices" src="dice6.png">
<img class="img4 fourChoices" src="dice6.png">
<img src="chick1.png">
</div>
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
2
<span class="caret"></span>
</button>
<ul id="list" class="dropdown-menu dropdown-info" aria-labelledby="dropdownMenu1">
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
<input type="text" name="" value="" placeholder="Choice 1"> <br>
</div>
------------------- UPDATE FOR JQUERY ------------------------
If you want to use JQuery and streamline the code further, here are the required modifications. Firstly, include JQuery in your code either by linking the js file from the cloud or downloading it.
With JQuery in place, switch from using
document.querySelector('selector')
to
$('selector') for selecting elements. JQuery treats single and multiple element selections uniformly, returning an array for multiple elements that can be manipulated directly without needing
forEach or
each. That's the next change.
As you already suggested in the comments, the final modification involves selecting various elements with different classes or ids using the , separator within the selector and then employing the addClass method.
$(document).on('click', '#list li', function(event) {
let numberOfChoices = event.target.innerText
$('#dropdownMenu1').html(numberOfChoices + "<span class='caret'></span>")
console.log(numberOfChoices);
// Showing Correct Number of Boxes
if (numberOfChoices === "2") {
$(".img3, .img4").addClass("invisible");
}
})
.invisible {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <!-- IMPORTANT here you add jquery from the cloud -->
<div class="container-fluid instructions">
<img src="chick2.png">
<img class="img1" src="dice6.png">
<img class="img2" src="dice6.png">
<img class="img3 threeChoices" src="dice6.png">
<img class="img4 fourChoices" src="dice6.png">
<img src="chick1.png">
</div>
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
2
<span class="caret"></span>
</button>
<ul id="list" class="dropdown-menu dropdown-info" aria-labelledby="dropdownMenu1">
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
<input type="text" name="" value="" placeholder="Choice 1"> <br>
</div>