document.querySelectorAll(".answer").forEach((answer) => { //getting .answer from HTML and adding a click function answer.addEventListener("click", (event) => { if (event.target.dataset) { document.querySelectorAll(".answer").forEach(e => e.classList.remove('selected')) answer.classList.add('selected') } if (event.target.dataset.correct == "true") { correctAnswer++ } }); }); .selected{ border: 5px solid black; } <h3 id="question"></h3> <div class="answers"> <button type="button" id="answer1" class="answer"></button> <button type="button" id="answer2" class="answer"></button> <button type="button" id="answer3" class="answer"></button> <button type="button" id="answer4" class="answer"></button> </div>Tengo mi pregunta y mis respuestas en un objeto, se barajan y las respuestas se colocan en estos botones, luego el botón seleccionado tiene un borde. ¿Cómo lo hago donde solo se puede seleccionar un botón a la vez, y si se seleccionan 2, el primero no se selecciona?
Es mejor usar una clase para aplicar estos estilos.
Simplemente elimine la clase de cada elemento antes de agregar la clase al elemento actual.
document.querySelectorAll(".answer").forEach((answer) => { //getting .answer from HTML and adding a click function answer.addEventListener("click", (event) => { if (event.target.dataset) { document.querySelectorAll(".answer").forEach(e => e.classList.remove('selected')) answer.classList.add('selected') } if (event.target.dataset.correct == "true") { correctAnswer++ } }); }); .selected{ border:5px solid black; } <h3 id="question"></h3> <div class="answers"> <button type="button" id="answer1" class="answer">1</button> <button type="button" id="answer2" class="answer">2</button> <button type="button" id="answer3" class="answer">3</button> <button type="button" id="answer4" class="answer">4</button> </div>