CODEWITHSUNDEEP
javascripthtmlcss
beginner
beginner

Reputation: 341

How to change the color of correct answer using JavaScript when check answer button clicked

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<br> (A)Lorem ipsum dolor<br>
  <span class="correct">(B)Lorem ipsum dolor</span><br> (C) Lorem ipsum dolor<br> (D) Lorem ipsum dolor</p>
<button class="ans-button">check answer</button>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<br>
  <span class="correct">(A)Lorem ipsum dolor</span><br> (B)Lorem ipsum dolor<br> (C) Lorem ipsum dolor<br> (D) Lorem ipsum dolor</p>
<button class="ans-button">check answer</button>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<br> (A)Lorem ipsum dolor<br> (B)Lorem ipsum dolor<br> (C) Lorem ipsum dolor<br>
  <span class="correct">(D) Lorem ipsum dolor</span></p>
<button class="ans-button">check answer</button>

how to change the color of the correct option when 'check answer' button of the question clicked?

Upvotes: 2

Views: 965

Answers (3)

Micha&#235;l Randria
Micha&#235;l Randria

Reputation: 500

Using JQuery, it's pretty easy:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<br> (A)Lorem ipsum dolor<br>
  <span class="correct">(B)Lorem ipsum dolor</span><br> (C) Lorem ipsum dolor<br> (D) Lorem ipsum dolor</p>
<button class="ans-button">check answer</button>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<br>
  <span class="correct">(A)Lorem ipsum dolor</span><br> (B)Lorem ipsum dolor<br> (C) Lorem ipsum dolor<br> (D) Lorem ipsum dolor</p>
<button class="ans-button">check answer</button>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<br> (A)Lorem ipsum dolor<br> (B)Lorem ipsum dolor<br> (C) Lorem ipsum dolor<br>
  <span class="correct">(D) Lorem ipsum dolor</span></p>
<button class="ans-button">check answer</button>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
  var a = $(".ans-button").on("click", function() {
    $(this).prev().find(".correct").css("color", "green");
  });
</script>

Upvotes: 1

Addis
Addis

Reputation: 2530

Remove the hard coded correct class on each span element and define the class in css, then on button click find the corresponding span(answer) element and add the class to the element:

[...document.getElementsByClassName('ans-button')].forEach(button => button.addEventListener('click', highlightAnswer));

function highlightAnswer() {
    const answer = event.target.previousElementSibling.querySelector('span');
    answer.classList.add('correct');
}
.correct {
  background-color: green;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<br> (A)Lorem ipsum dolor<br>
  <span>(B)Lorem ipsum dolor</span><br> (C) Lorem ipsum dolor<br> (D) Lorem ipsum dolor
</p>
<button class="ans-button">check answer</button>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<br>
  <span>(A)Lorem ipsum dolor</span><br> (B)Lorem ipsum dolor<br> (C) Lorem ipsum dolor<br> (D) Lorem ipsum dolor
</p>
<button class="ans-button">check answer</button>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<br> (A)Lorem ipsum dolor<br> (B)Lorem ipsum dolor<br> (C) Lorem ipsum dolor<br><span>(D) Lorem ipsum dolor</span>
</p>
<button class="ans-button">check answer</button>

Upvotes: 1

mikoto dread
mikoto dread

Reputation: 176

You can use the IF ELSE here, if answer is correct, you make .class in css giving it color, if answer is correct, CSS applies, if not, it goes to else, which can be left empty not applying anything or you can give alert if you want as bonus telling its wrong or giving it other color

Upvotes: -1

Related Questions