Uncaught ReferenceError ReferenceError: question is not defined-CodePudding

I'm trying to make a quiz game for a school project and it's not doing its function (Like showing the answer options). And I've got the "Uncaught ReferenceError ReferenceError: question is not defined".

index.html

<!DOCTYPE html>
<html lang="en">
<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>Spēle</title>
  <style>
        .box{
            max-width: 18rem;
            text-align: center;
            border: 2px solid black;
            border-radius: 8px;
            padding: 8px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
  </style>
</head>
<body>
  <div >
    <div >
      Spēle, "Kā sauc šo pilsētu?"
      <hr>
      <div id="question-title">
        Question title
      </div>
      <div id="option-list">
        <input type="radio" id="0" name="0"> option value</input>
      </div>
      <div id="score-area">
        Score Area
      </div><button id="submit">Iesniegt!</button><br>
      <button id="start">Sākt!</button><br>
      <button id="play-again">Spēlēt vēlreiz!</button>
    </div><!-- Database-->
    <script src="script.js"></script> 
    <script>


        // definē variantus:
        let questionNo = 0;
        let score = 0;
        let question_title = document.getElementById(question-title);
        let option_list = document.getElementById(option-list);
        let score_area = document.getElementById(score-area);
        let btn_submit = document.getElementById(submit);
        let start = document.getElementById(start);
        let play_again = document.getElementById(play-again);

        // paslepjam dažas lietas
        hideItems(question_title);
        hideItems(options_list);
        hideItems(btn_submit);
        hideItems(play_agian);
        hideItems(score_area);

        // Starta poga uz klikšķa
        start.addEventListener('click', function () {
            show(question_title);
            show(option_list);
            show(btn_submit);
            loadQuestions();
            hideItems(start);
        });

        function loadQuestions() {
            // parbaudi vai ir jautājami jautājumi
            if (questionNo < data.lengt) {
                let q = data[questionNo].qs;
                let optionsArray = data[questionNo].options;

                // Parādīt jautājumus:
                question_title.innerText = q;

                // Parādīt opcijas:
               option_list.innerText = "";
                for (let i =0; i < 4; i  ) {
                    option_list.innerHTML = options_list.innerHTML  
                    `
                    <input type="radio" id="${i}" name="${question_title}">${optionsArray[i]}</input>
                    `;
                }
            }else{
              console.log("no more question")

              show(score_area);
              score_area.innerText = "Pareizās atbildes: "   score;

              hideItems(btn_submit);
              show(play_again);
            }
        }

        play_again.addEventListener("click", function() {
            location.reload();
        })

        btn_submit.addEventListener('click', function () {
          let id = getCheckedId();

          try {
              if (id == data[questionNo].answerId) {
                  score  ;
                  console.log("correct answer")
              }
          } catch (error) {

          }
          
          questionNo  ;

          loadQuestions();
        })

        function getCheckedId() {
            for (let i = 0; i < 4; i  ) {
                if (document.getElementById(i).checked)
                    console.log("you selected:"  i)
                    return i;
        }}

        function hideItems(element) {
            element.style.display = "none";
        }
        function showItems(element) {
            element.style.display = "block";
        }
    </script>
  </div>
</body>
</html>

Script.js

 var data= [
    {
        "qs": "1. Pilsēta",
        "options": [
            "Rīga",
            "Kuldīga",
            "Jēkabpils",
            "Talsi"
        ],
        "answerId": 2
    },
    {
        "qs": "2. Pilsēta",
        "options": [
            "Ogre",
            "Liepāja",
            "Snēpele",
            "Daugavpils"
        ],
        "answerId": 1
    },
    {
        "qs": "3. Pilsēta",
        "options": [
            "Tukums",
            "Grobiņa",
            "Cēsis",
            "Priekule"
        ],
        "answerId": 4
    },
    {
        "qs": "4. Pilsēta",
        "options": [
            "Basi",
            "Ezere",
            "Saldus",
            "Turlava"
        ],
        "answerId": 3
    },
    {
        "qs": "5. Pilsēta",
        "options": [
            "Kandava",
            "Valmiera",
            "Rūjiena",
            "Krāslava"
        ],
    }
]

I tried to make a quiz game with images (For cities like "Whats the city called" from the image and there's four options on which one is the correct city.) but sort of failed because its not doing its thing and I am a beginner at coding. It was supposed to show u a picture of a city and you have to check the correct answer. Once you've submitted the answer you receive another question and so on until you've answered all of the questions and it shows your score and gives you a option to "play again".

CodePudding user response：

document.getElementById() is not receiving a string as parameter

I think that you should have used quotation marks "" in the parameter

let question_title = document.getElementById("question-title");
let option_list = document.getElementById("option-list");
let score_area = document.getElementById("score-area");
let btn_submit = document.getElementById("submit");
let start = document.getElementById("start");
let play_again = document.getElementById("play-again");

So it can recognizes the value as a string and finds the element using its ID, since there is no quotation marks "", it is trying to find a variable named question that does not exists so a error is returned saying this variable is not defined.

Also, it is not trying to find a variable named question-title because the minus character - is invalid for variable names.

The funcion is defined as showItems and being used jus as show

You are defining the function as showItems()

function showItems(element) {
    element.style.display = "block";
}

but you are always calling it as show()

show(question_title);
show(option_list);
show(btn_submit);

you should call it using showItems()

showItems(question_title);
showItems(option_list);
showItems(btn_submit);

Variable option_list being used as options_list with an s

You should remove the s in theses lines

hideItems(options_list);

option_list.innerHTML = options_list.innerHTML  
`
<input type="radio" id="${i}" name="${question_title}">${optionsArray[i]}</input>
`;

Variable play_again being used as play_agian

You should write it correctly

hideItems(play_agian);

Atribute .length being called as .lengt

You should write it correctly

if (questionNo < data.lengt)

Functions needs to go before using them

So you should write it in the beginning of the script, so the program knows what is it and how it works when you call

<script>

    function getCheckedId() {
        for (let i = 0; i < 4; i  ) {
            if (document.getElementById(i).checked)
                console.log("you selected:"  i)
                    return i;
            }}

    function hideItems(element) {
        element.style.display = "none";
    }
    function showItems(element) {
        element.style.display = "block";
    }

The complete and corrected code

<!DOCTYPE html>
<html lang="en">
<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>Spēle</title>
  <style>
        .box{
            max-width: 18rem;
            text-align: center;
            border: 2px solid black;
            border-radius: 8px;
            padding: 8px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
  </style>
</head>
<body>
  <div >
    <div >
      Spēle, "Kā sauc šo pilsētu?"
      <hr>
      <div id="question-title">
        Question title
      </div>
      <div id="option-list">
        <input type="radio" id="0" name="0"> option value</input>
      </div>
      <div id="score-area">
        Score Area
      </div><button id="submit">Iesniegt!</button><br>
      <button id="start">Sākt!</button><br>
      <button id="play-again">Spēlēt vēlreiz!</button>
    </div><!-- Database-->
    <script src="script.js"></script>
    <script>

        // Functions needs to go before using them
        function getCheckedId() {
            for (let i = 0; i < 4; i  ) {
                if (document.getElementById(i).checked)
                    console.log("you selected:"  i)
                    return i;
        }}

        function hideItems(element) {
            element.style.display = "none";
        }
        function showItems(element) {
            element.style.display = "block";
        }

        // definē variantus:
        let questionNo = 0;
        let score = 0;
        let question_title = document.getElementById("question-title");
        let option_list = document.getElementById("option-list");
        let score_area = document.getElementById("score-area");
        let btn_submit = document.getElementById("submit");
        let start = document.getElementById("start");
        let play_again = document.getElementById("play-again");

        // paslepjam dažas lietas
        hideItems(question_title);
        hideItems(option_list);
        hideItems(btn_submit);
        hideItems(play_again);
        hideItems(score_area);

        // Starta poga uz klikšķa
        start.addEventListener('click', function () {
            showItems(question_title);
            showItems(option_list);
            showItems(btn_submit);
            loadQuestions();
            hideItems(start);
        });

        function loadQuestions() {
            // parbaudi vai ir jautājami jautājumi
            if (questionNo < data.length) {
                let q = data[questionNo].qs;
                let optionsArray = data[questionNo].options;

                // Parādīt jautājumus:
                question_title.innerText = q;

                // Parādīt opcijas:
               option_list.innerText = "";
                for (let i =0; i < 4; i  ) {
                    option_list.innerHTML = option_list.innerHTML  
                    `
                    <input type="radio" id="${i}" name="${question_title}">${optionsArray[i]}</input>
                    `;
                }
            }else{
              console.log("no more question")

              showItems(score_area);
              score_area.innerText = "Pareizās atbildes: "   score;

              hideItems(btn_submit);
              showItems(play_again);
            }
        }

        play_again.addEventListener("click", function() {
            location.reload();
        })

        btn_submit.addEventListener('click', function () {
          let id = getCheckedId();

          try {
              if (id == data[questionNo].answerId) {
                  score  ;
                  console.log("correct answer")
              }
          } catch (error) {

          }

          questionNo  ;

          loadQuestions();
        })
    </script>
  </div>
</body>
</html>