检查测验以查看是否单击了 label 或单选按钮

Question

I am building a quiz and ran into an issue when trying to show question explanations. If you click the label it works and shows the explanation but I also need it to show if the radio button beside the label is clicked. Can anyone tell me how to do this? This is the function that shows the explanation if the label is clicked and the code I tried to add to the if statement to show if the radion button is clicked too. Thanks in advance.

function showExplanation(e) {
 if (e.target && e.target.nodeName === "LABEL" || e.target && 
 e.target.nodeName === "RADIO") {
 e.target.parentElement.nextElementSibling.classList.add("show");
  }
 }

 function buildQuiz() {
  // variable to store the HTML output
  const output = [];

// for each question...
myQuestions.forEach((currentQuestion, questionNumber) => {
// variable to store the list of possible answers
const answers = [];

// and for each available answer...
for (var letter in currentQuestion.answers) {
  // ...add an HTML radio button
  answers.push(
    `<label class="showExlainLabel">
      <input type="radio" id="radionButton 
   name="question${questionNumber}" value="${letter}">
      ${letter} :
      ${currentQuestion.answers[letter]}
    </label>`
  );
 }

 // add this question and its answers to the output
  output.push(
  `<div class="slide">
    <div class="question"> ${currentQuestion.question} </div>
    <div class="answers"> ${answers.join("")} </div>
    
    <div class="explanations">
      <p>${currentQuestion.explanation.correct}</p>
      <p>${currentQuestion.explanation.explain}</p>
      <p>${currentQuestion.explanation.source}</p>
      </div>
  </div>`
);

});
// finally combine our output list into one string of HTML and 
put it on the page
quizContainer.innerHTML = output.join("");
}

function showResults() {
// gather answer containers from our quiz
const answerContainers = 
quizContainer.querySelectorAll(".answers");

// keep track of user's answers
let numCorrect = 0;

// for each question...
myQuestions.forEach((currentQuestion, questionNumber) => {
// find selected answer
const answerContainer = answerContainers[questionNumber];
const selector = `input[name=question${questionNumber}]:checked`;
const userAnswer = (answerContainer.querySelector(selector) || 
{}).value;

// if answer is correct
if (userAnswer === currentQuestion.correctAnswer) {
  // add to the number of correct answers
  numCorrect++;

  // color the answers green
  answerContainers[questionNumber].style.color = "black";
}
// if answer is wrong or blank
else {
  // color the answers red
  answerContainers[questionNumber].style.color = "black";
  }
});

// show number of correct answers out of total
if (numCorrect <= 4) {
resultsContainer.innerHTML =
`<p>You scored:
 ${numCorrect} out of 
    ${myQuestions.length}</p>
 <p>Don\'t worry! Extra content review and practice can help you 
  get to where you want to be before the exam!
  </p>`;
  }else if(numCorrect > 5 && numCorrect < 8) {
   resultsContainer.innerHTML =
  `<p>You scored:
   ${numCorrect} out of 
    ${myQuestions.length}</p>
    <p>Feel like you need content review?`;
    }else if (numCorrect >= 9) {
    resultsContainer.innerHTML =
     `<p>You scored: 
     ${numCorrect} out of 
    ${myQuestions.length}</p>
    <p>Way to go! Your preparation is paying off!
    </p>`;
    } else{
     resultsContainer.innerHTML =
    `<p>You scored:
    ${numCorrect} out of 
    ${myQuestions.length}</p>
    <p>Woops! You didn\'t get any of the questions correct.</p>`;
    }



  }

 function showSlide(n) {
 slides[currentSlide].classList.remove("active-slide");
 slides[n].classList.add("active-slide");
 currentSlide = n;
 if (currentSlide === 0) {
 // previousButton.style.display = "inline-block";
 nextButton.style.display = "inline-block";
 submitButton.style.display = "inline-block";
 document.getElementById("submit").disabled = true;
// document.getElementById("previous").disabled = true;
} else {
submitButton.style.display = "inline-block";
document.getElementById("submit").disabled = false;
// document.getElementById("previous").disabled = false;
}
if (currentSlide === slides.length - 1) {
// previousButton.style.display = "inline-block";
nextButton.style.display = "none";
submitButton.style.display = "inline-block";
document.getElementById("submit").disabled = false;
} else {
// previousButton.style.display = "inline-block";
nextButton.style.display = "inline-block";
submitButton.style.display = "none";
}
}

function showNextSlide() {
  showSlide(currentSlide + 1);
 }

  // function showPreviousSlide() {
  //   showSlide(currentSlide - 1);
  // }

  // Variables
  const quizContainer = document.getElementById("quiz");
  const resultsContainer = document.getElementById("results");
  const myQuestions = [
  {
   question: "What color is grass",
   answers: {
   a: "green",
   b: "blue",
   c: "red",
   d: "purple"
    },
   explanation: {
   correct: "Correct answer: A. green",
   explain: `The grass is green`,
   source: "Source: the window"
  },
   correctAnswer: "a"
  },
  {
   question: `What day is it`,
   answers: {
   a: "Monday",
   b: "Wednesday",
   c: "Friday",
   d: "Sunday"
  },
   explanation: {
   correct: "Correct answer: C. Friday",
   explain: `All of the other days of the week have passed it is 
   now Friday`,
   source: "Calendar"
   },
   correctAnswer: "c"
   },

   ];


   // Kick things off
   buildQuiz();

   // Pagination
   // const previousButton = document.getElementById("previous");
   const nextButton = document.getElementById("next");
   const submitButton = document.getElementById("submit");
   const slides = document.querySelectorAll(".slide");
   const answersLabels = document.querySelector("body");
   let currentSlide = 0;

   // Show the first slide
   showSlide(currentSlide);

   // Event listeners

  // previousButton.addEventListener("click", showPreviousSlide);
     nextButton.addEventListener("click", showNextSlide);
     submitButton.addEventListener("click", showResults);
     answersLabels.addEventListener("click", showExplanation);

Answer 1

There is no node name called Radio try INPUT instead of RADIO

if (e.target && e.target.nodeName === "LABEL" || e.target && 
 e.target.nodeName === "INPUT") {
 e.target.parentElement.nextElementSibling.classList.add("show");
  }
 }