It was working perfect like several days ago and now it's just saying "Uncaught Type Error: Cannot read properties of undefined (reading 'class List')" at lines 86 and 87. Can someone explain why is it like this, i need answers as sooner as possible, thanks in advance)

Ps. the language of my website is armenian, sorry if u don't understand it

const paragraph = document.querySelector('#paragraph');

const params = new URLSearchParams(window.location.search);

params.forEach((value)=>{
    paragraph.append(`${value}`);
    paragraph.append(document.createElement("br"));
});

(function(){
    // Functions
    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(letter in currentQuestion.answers){
  
            // ...add an HTML radio button
            answers.push(
              `<label>
                <input type="radio" name="question${questionNumber}" value="${letter}">
                ${letter} :
                ${currentQuestion.answers[letter]}
              </label>`
            );
          }
  
          // add this question and its answers to the output  
          output.push(
            `<div >
              <div > ${currentQuestion.question} </div>
              <div > ${answers.join("")} </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 = 'lightgreen';
        }
        // if answer is wrong or blank
        else{
          // color the answers red
          answerContainers[questionNumber].style.color = 'red';
        }
      });
  
      // show number of correct answers out of total
      resultsContainer.innerHTML = `you got ${numCorrect} out of ${myQuestions.length}`;
    }
  
    function showSlide(n) {
      slides[currentSlide].classList.remove('active-slide');
      slides[n].classList.add('active-slide');
      currentSlide = n;
      if(currentSlide === 0){
        previousButton.style.display = 'none';
      }
      else{
        previousButton.style.display = 'inline-block';
      }
      if(currentSlide === slides.length-1){
        nextButton.style.display = 'none';
        submitButton.style.display = 'inline-block';
      }
      else{
        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 submitButton = document.getElementById('submit');
  
    const myQuestions = [
      {
        question: "Լուծել հավասարումը 3 - x > 1",
        answers: {
          a: "(-∞ ; 2]",
          b: "(2 ;  ∞)",
          c: "(-∞ ; 2)",
          d: "[2 ;  ∞)"
        },
        
        correctAnswer: "c"
      },
      {
        question: "Շրջանագծի հավասարումն է (x   2)2   (y   1)2 = 13, գտնել շոշափողի թեքությունը",
        answers: {
          a: "-2/3",
          b: "Չգիտեմ",
          c: "5",
          d: "2/3"
        },
        correctAnswer: "a"
      },
      {
        question: "x<sup>2</sup> - 3|x - 2| - 4x = - 6 հավասարումից գտնել x-ը",
        answers: {
          a: "Չգիտեմ",
          b: "4, 0, 3, 1",
          c: "8, 9, 15",
          d: "5"
        },
        correctAnswer: "b"
      },
      {
        question: "hello",
        answers: {
          a: "Չգիտեմ",
          b: "hi",
          c: "duck",
          d: "lol"
        },
        correctAnswer: "b"
      }
    ];

  
    const previousButton = document.getElementById("previous");
    const nextButton = document.getElementById("next");
    const slides = document.querySelectorAll(".slide");
    let currentSlide = 0;
  
    showSlide(currentSlide);
  
    submitButton.addEventListener('click', showResults);
    previousButton.addEventListener("click", showPreviousSlide);
    nextButton.addEventListener("click", showNextSlide);
  })();

<!DOCTYPE html>
<html lang="hy">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>11 դասարան</title>
    <link rel="stylesheet" href="style.css">
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> -->

    <script src="https://kit.fontawesome.com/2bbac3a66c.js" crossorigin="anonymous" ></script>
</head>
<body>
    <br><h1>Երևանի Գալուստ Գյուլբենկյանի անվան համար 190 ավագ դպրոց
        <br><br>Մաթեմատիկայի առցանց քննություն</h1><br><br>
    <h1>11-րդ դասարանի մաթեմատիկա</h1><br>
    <h1>Լրացրու հետևյալ դաշտերը.</h1><br>
    <form  id="create-account-form" action="test11.html" method="GET">
        <div >
            <input type="text" id="username"  placeholder="Անուն" name="username">
            <p></p>
        </div>
        <div >
            <input type="text" id="email"  placeholder="Ազգանուն" name="email">
            <p></p>
        </div>

        <button type="submit" >Submit</button>
    </form>

    <script src="script.js"></script>
</body>
</html>

CodePudding user response：

You never run buildQuiz that's why slides is an empty NodeList and that's why you are getting the error.