how to make the code below more simple and short
html :
<div class="navigation-manual">
<label id="point-1" for="radio1" class="manual-btn other" onclick="myFunction1()">1</label>
<label id="point-2" for="radio2" class="manual-btn" onclick="myFunction2()">2</label>
<label id="point-3" for="radio3" class="manual-btn" onclick="myFunction3()">3</label>
<label id="point-4" for="radio4" class="manual-btn" onclick="myFunction4()">4</label>
</div>
I made 4 buttons which if button 1 is clicked the background will change color to white, and when button 2 is clicked then button 2 the background will turn white, but button 1's background color returns to its original color, and applies also to other button
Js :
function myFunction1(){
document.getElementById("point-1").style.background = "white";
document.getElementById("point-2").style.background = "none";
document.getElementById("point-3").style.background = "none";
document.getElementById("point-4").style.background = "none";
}
function myFunction2(){
document.getElementById("point-2").style.background = "white";
document.getElementById("point-1").style.background = "none";
document.getElementById("point-3").style.background = "none";
document.getElementById("point-4").style.background = "none";
}
function myFunction3(){
document.getElementById("point-3").style.background = "white";
document.getElementById("point-1").style.background = "none";
document.getElementById("point-2").style.background = "none";
document.getElementById("point-4").style.background = "none";
}
function myFunction4(){
document.getElementById("point-4").style.background = "white";
document.getElementById("point-1").style.background = "none";
document.getElementById("point-2").style.background = "none";
document.getElementById("point-3").style.background = "none";
}
This should work Just replace red with white
const labels = document.querySelectorAll(".manual-btn")
labels.forEach(l => l.addEventListener("click", () => {
labels.forEach(l => {l.style.background = "none"})
l.style.background = "red"
}));<div class="navigation-manual">
<label id="point-1" for="radio1" class="manual-btn other" >1</label>
<label id="point-2" for="radio2" class="manual-btn" >2</label>
<label id="point-3" for="radio3" class="manual-btn" >3</label>
<label id="point-4" for="radio4" class="manual-btn">4</label>
</div>You can try to reset the background on all items first.
function labelClick(selectedId){
document.querySelectorAll('.manual-btn').forEach(label => {
label.style.background = "none";
})
document.getElementById(selectedId).style.background = "white";
}.navigation-manual {
background-color: gray;
}<div class="navigation-manual">
<label id="point-1" for="radio1" class="manual-btn other" onclick="labelClick('point-1')">1</label>
<label id="point-2" for="radio2" class="manual-btn" onclick="labelClick('point-2')">2</label>
<label id="point-3" for="radio3" class="manual-btn" onclick="labelClick('point-3')">3</label>
<label id="point-4" for="radio4" class="manual-btn" onclick="labelClick('point-4')">4</label>
</div>Or you can try to listen on an existing radio button change event.