Studi
New Coder
Code:
const selectBtn = document.querySelectorAll(".select-btn");
const options = document.querySelectorAll(".select-btn label");
selectBtn.forEach(function (button, index) {
button.addEventListener("click", () => {
button.classList.toggle("active");
selectBtn.forEach(function (button2, index2) {
if (index !== index2) {
button2.classList.remove("active");
}
});
});
});
options.forEach((button) => {
button.addEventListener("click", (e) => {
const newLabel = e.target.innerText;
const defaultLabel = e.target.parentElement.firstChild.nextElementSibling;
defaultLabel.innerText = newLabel;
e.target.parentElement.classList.remove("active");
});
});
//
how or where can I add a function that will remove classList "active" from the selectBtn if I click anywhere on the document and can still add back to it if I click on the button?