How to reset button style in Javascript

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";
    }
}

Basically, In this quiz app, I have 4 buttons for answers and once you click on one answer it makes the border black. The problem I am facing is that once I press the next question, it loads up another question with 4 different answers but one of the buttons will still have the border black. How do I get it to reset once I load up another question? and Extra question if it's okay, how can I only select one button at a time per question?

Solution 1:

Maybe you are looking for css:initial property?

The initial CSS keyword applies the initial (or default) value of a property to an element. It can be applied to any CSS property. This includes the CSS shorthand all, with which initial can be used to restore all CSS properties to their initial state.

Or you could add class and use classList.toggle() to switch between them.

I don't have your html code and full code so can't help you fully, but this is an example that may help you implement to your code:

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>

Solution 2:

There is no 'reset' as there is no default, you will just have to manually undo what you did earlier, i.e to remove the border completely:

answer.style.border = "none";

To select each button individually, you will ave to give them each an ID, based of something like an iteration, instead of trying to select them by the shared class