0
336
Views¿Cómo puedo implementar el código en JavaScript para que cualquiera que sea la calificación seleccionada, el fondo de ese número se resalte en naranja?
¿Cómo puedo implementar el código en JavaScript para que cualquiera que sea la calificación seleccionada, el fondo de ese número se resalte en naranja?
<ul class="rating-container"> <li class="ratings"><button id="1" class="list-btn" type="button">1</button></li> <li class="ratings"><button id="2" class="list-btn" type="button">2</button></li> <li class="ratings"><button id="3" class="list-btn" type="button">3</button></li> <li class="ratings"><button id="4" class="list-btn" type="button">4</button></li> <li class="ratings"><button id="5" class="list-btn" type="button">5</button></li> </ul> 
·
Juan Pablo Isaza
2 answers
Answer question0
<ul class="rating-container"> <li class="ratings"><button id="1" onclick="clickRating(1)" class="list-btn" type="button">1</button></li> <li class="ratings"><button id="2" onclick="clickRating(2)" class="list-btn" type="button">2</button></li> <li class="ratings"><button id="3" onclick="clickRating(3)" class="list-btn" type="button">3</button></li> <li class="ratings"><button id="4" onclick="clickRating(4)" class="list-btn" type="button">4</button></li> <li class="ratings"><button id="5" onclick="clickRating(5)" class="list-btn" type="button">5</button></li> </ul> <script> function clickRating(rating) { for (let i = 1; i<=5; i++) { if (i<=rating) { document.getElementById(i).style.backgroundColor = 'yellow' } else { document.getElementById(i).style.backgroundColor = 'unset' } } } </script>
·
Juan Pablo Isaza
Report
0
Si usa JavaScript nativo, adjunte un detector de eventos al contenedor que contiene los botones y escuche los eventos de clic. Cuando se hace clic en un botón, agregue una clase, y con esa clase, puede diseñar el botón para que sea lo que quiera.
const ratingContainer = document.getElementById("rating") let prevTarget = null ratingContainer.addEventListener("click", (e) =>{ const target = e.target.closest("button") //ensure not the same button if(target !== prevTarget) { target.classList.add("highlight") if(prevTarget) prevTarget.classList.remove("highlight") prevTarget = target } }) .highlight{ background-color: orange; } <div id="rating"> <button id="1">button1</button> <button id= "2">button2</button> <button id= "3">button3</button> <button id= "4">button4</button> </div>
·
Juan Pablo Isaza
Report
Answer question