Esta es una versión muy reducida para visualizar lo que me gustaría hacer.
mi html
<p class="call">Please select a number.</p> <div class="button-flex"> <button class="rating">1</button> <button class="rating">2</button> <button class="rating">3</button> <button class="rating">4</button> <button class="rating">5</button> </div>mi js
let allBtns = document.querySelectorAll(".rating"); allBtns.forEach((option) => { option.addEventListener("click", function () { option.style.backgroundColor = "orange"; }); });Esencialmente, quiero que un usuario pueda hacer clic en una sola calificación (1 a 5) que eventualmente se usará para actualizar una cadena.
El problema principal que me gustaría abordar ahora es poder seleccionar un valor, elegir otro y anular la selección del valor elegido anteriormente. Pude encontrar un método usando radios, y las casillas de verificación funcionarán, pero también quiero mantener el estilo del botón porque así es como se supone que debe mostrarse.
¿Es esto posible con un elemento de botón normal?
let allBtns = document.querySelectorAll(".rating"); allBtns.forEach((option) => { option.addEventListener("click", function (event) { allBtns.forEach(el => { el.classList.remove('active'); }); event.currentTarget.classList.add('active'); }); }); .rating.active { background-color: orange; } <p class="call">Please select a number.</p> <div class="button-flex"> <button role="radio" class="rating">1</button> <button role="radio" class="rating">2</button> <button role="radio" class="rating">3</button> <button role="radio" class="rating">4</button> <button role="radio" class="rating">5</button> </div>Identifica el elemento de botón actualmente seleccionado con .active
Cuando se selecciona el botón, elimine el .active de todos los elementos del botón e inserte el .active en el botón recién seleccionado.
Debe memorizar el último botón, luego volver a cambiarlo en el siguiente clic, así:
let allBtns = document.querySelectorAll(".rating"); let lastBtn; allBtns.forEach((option) => { option.addEventListener("click", function () { lastBtn && (lastBtn.style.backgroundColor = null); (lastBtn = option).style.backgroundColor = "orange"; }); }); <p class="call">Please select a number.</p> <div class="button-flex"> <button class="rating">1</button> <button class="rating">2</button> <button class="rating">3</button> <button class="rating">4</button> <button class="rating">5</button> </div>