On my website, I have a pop-up modal with a form that contains 5 divs, each with a picture and description. I came across this JS code on w3schools that allows me to style a selected div. However, when the modal is opened, one of the divs is already pre-selected, which is not what I want. I'm struggling to figure out how to modify the code so that initially no divs are selected.
// When user clicks an div, add background
var divs = document.getElementsByClassName("mood-state");
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener("click", function () {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
Below are some of the div elements in the modal:
<div class="mood-state">
<img src="neutral.svg" alt="" />
<p>Neutral</p>
</div>
<div class="mood-state">
<img src="smile.svg" alt="" />
<p>Pleasant</p>
</div>
<div class="mood-state active">
<img src="grin.svg" alt="" />
<p>Very Pleasant</p>
</div