function showQuestion(questionAndAnswers) { const shuffledAnswers = _.shuffle(questionAndAnswers.answers); questionTag.innerText = questionAndAnswers.question; shuffledAnswers.forEach(({ text, correct }, i) => { answerTag[i].innerText = text; answerTag[i].dataset.correct = correct; }); } document.querySelectorAll(".answer").forEach((answer) => { answer.addEventListener("click", (event) => { if (event.target.dataset ) { answer.style.border = "1.5px solid" } }); }); function nextQuestion() { const nextIndex = currentQuestionIndex + 1; if (nextIndex <= myQuestions.length - 1) { showQuestion(myQuestions[nextIndex]); currentQuestionIndex = nextIndex; } else { end.style.visibility = "visible"; nxt_question_btn.style.visibility = "hidden"; } }Básicamente, en esta aplicación de prueba, tengo 4 botones para las respuestas y una vez que haces clic en una respuesta, el borde se vuelve negro. El problema al que me enfrento es que una vez que presiono la siguiente pregunta, carga otra pregunta con 4 respuestas diferentes, pero uno de los botones aún tendrá el borde negro. ¿Cómo hago para que se reinicie una vez que cargue otra pregunta? y Pregunta adicional si está bien, ¿cómo puedo seleccionar solo un botón a la vez por pregunta?
No hay 'restablecimiento' ya que no hay valores predeterminados, solo tendrá que deshacer manualmente lo que hizo anteriormente, es decir, eliminar el borde por completo:
answer.style.border = "none";Para seleccionar cada botón individualmente, tendrá que darles a cada uno un ID, basado en algo así como una iteración, en lugar de intentar seleccionarlos por la clase compartida.
esa es una pregunta difícil, no hay una respuesta fácil sin saber cuál era el estilo anterior, por lo que es bueno almacenar el valor anterior del estilo en la memoria y restablecer los estilos al valor anterior después de que se haya cargado la siguiente pregunta
// a variable declared somewhere in common scope let prevBorder // "backup" the old value when you want to mark the answer as "selected" prevBorder = element.styles.border // restore to the initial value when you want to reset the styles element.styles.border = prevBorder¿Quizás está buscando css:initial ?
La palabra clave initial CSS aplica el valor inicial (o predeterminado) de una propiedad a un elemento. Se puede aplicar a cualquier propiedad CSS. Esto incluye la abreviatura CSS all, con la cual initial se puede usar para restaurar todas las propiedades CSS a su estado inicial.
O puede agregar una clase y usar classList.toggle() para cambiar entre ellos.
No tengo su código html ni el código completo, por lo que no puedo ayudarlo por completo, pero este es un ejemplo que puede ayudarlo a implementar su código:
document.querySelectorAll('button').forEach(item => { item.addEventListener('click', function() { item.style.border = '10px solid black' document.querySelectorAll('button').forEach(i => { if (i != item) i.style.border = "initial" }) }) }) <button>Click</button> <button>Click</button> <button>Click</button> <button>Click</button>