CODEWITHSUNDEEP
javascript
user16569672
user16569672

Reputation:

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?

Upvotes: 1

Views: 298

Answers (3)

James
James

Reputation: 2787

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>

Upvotes: 0

roomcayz
roomcayz

Reputation: 2564

that's a tough one, there is no easy answer without knowing what the previous style was, so it's good to store the previous value of the style in memory and reset the styles to the previous value after the next question has been loaded

// 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

Upvotes: 1

AleksW
AleksW

Reputation: 713

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

Upvotes: 1

Related Questions