我怎样才能使我选择的表格在表格中表现突出？

Question

I have created two questions in the tag. I want to highlight the answer I chose by changing the background color. However, it is possible for me to do this because when I choose the answer in the first question, then I choose the next question, the highlight in the previous one disappears. So now, how I can do that, and how I can choose my answer by click anywhere in the answer box instead of clicking on the label or the radio box.

 function openPresent(event) { const answer = document.querySelectorAll('.option'); for (let i = 0; i < answer.length; i++) { answer[i].style.backgroundColor = originalAnswerArray[i]; } event.target.style.backgroundColor = 'blue'; } const answer = document.querySelectorAll('.option'); let i; let originalAnswerArray = []; for (i = 0; i < answer.length; i++) { originalAnswerArray.push(answer[i].getAttribute('value')); answer[i].addEventListener('click', openPresent); }

 .option { border-top: 1px solid white; border-bottom: 1px solid white; display: flex; justify-content: flex-start; align-items: center; flex-direction: row; width: auto; padding: 15px; background-color: #f1f1f1; }.option:hover { background-color: #ddd; } label { margin-left: 15px; }

 <form> <div class='option'> <input type='radio' id='option1' name="question1" value="option 1"> <label for='option1'> option 1 </label><br> </div> <div class='option'> <input type='radio' id='option2' name="question1" value="option 2"> <label for='option2'>option 2</label><br> </div> <div class='option'> <input type='radio' id='option3' name="question1" value="option 3"> <label for='option3'>option 3</label><br> </div> <div class='option'> <input type='radio' id='option4' name="question1" value="option 4"> <label for='option4'>option 4</label><br> </div> </form> <p><strong> Question 2 of 10</strong></p> <p>Question 2</p> <form> <div class='option'> <input type='radio' id='option1' name="question2" value="option 1"> <label for='option1'> <div>option 1 </div> </label><br> </div> <div class='option'> <input type='radio' id='option2' name="question2" value="option 2"> <label for='option2'>option 2</label><br> </div> <div class='option'> <input type='radio' id='option3' name="question2" value="option 3"> <label for='option3'>option 3</label><br> </div> <div class='option'> <input type='radio' id='option4' name="question2" value="option 4"> <label for='option4'>option 4</label><br> </div> </form>

Answer 1

The function openPresent with property event, will produce the pointer event in console log. You can use the object of target ( event.target ) to search your input element. You can use querySelector . After that, you can change the checked to true for make this radio input checked. You can use this code:

function openPresent(event) {
  const answer = document.querySelectorAll(".option");
  for (let i = 0; i < answer.length; i++) {
    answer[i].style.backgroundColor = originalAnswerArray[i];
  }

  const input = event.target.querySelector('input')
  input.checked = true

  event.target.style.backgroundColor = "blue";
}

const answer = document.querySelectorAll(".option");
let i;

let originalAnswerArray = [];
for (i = 0; i < answer.length; i++) {
  originalAnswerArray.push(answer[i].getAttribute("value"));
  answer[i].addEventListener("click", openPresent);
}