cómo hacer que el siguiente código sea más simple y corto
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>Hice 4 botones que si se hace clic en el botón 1, el fondo cambiará de color a blanco, y cuando se hace clic en el botón 2, luego en el botón 2, el fondo se volverá blanco, pero el color de fondo del botón 1 vuelve a su color original, y se aplica también a otro botón
j:
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"; }Esto debería funcionar Simplemente reemplace rojo con blanco
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>Puede intentar restablecer el fondo en todos los elementos primero.
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>O puede intentar escuchar en un evento de cambio de botón de radio existente.