堆栈内存溢出
  繁体   English   中英

未捕获的 ReferenceError ReferenceError：未定义问题

[英]Uncaught ReferenceError ReferenceError: question is not defined

 原文  2023-01-13 20:52:20  3   1    javascript/ java/ html

问题描述

我正在尝试为学校项目制作一个问答游戏，但它没有执行 function（比如显示答案选项）。 我得到了“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 class="container">
    <div class="container box">
      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>

脚本.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"
        ],
    }
]

我试图用图像制作一个问答游戏（对于图像中的“城市叫什么”之类的城市，有四个选项，其中一个是正确的城市。）但有点失败，因为它没有做它的事情而且我是初学者在编码。 它应该显示一个城市的图片，你必须检查正确答案。 提交答案后，您会收到另一个问题，依此类推，直到您回答完所有问题，它会显示您的分数，并为您提供“再次玩”的选项。

1 个解决方案

解决方案1
 1 已采纳  2023-01-13 21:30:54

document.getElementById() 未接收字符串作为参数

我认为您应该在参数中使用引号 ""

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");

因此它可以将该值识别为字符串并使用其 ID 查找元素，因为没有引号“”，它试图找到一个不存在的名为question的变量，因此返回一个错误，指出该变量未定义.

此外，它不会尝试查找名为question-title的变量，因为减号-对于变量名称无效。

该函数被定义为showItems并被用作 jus show

您将 function 定义为showItems()

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

但你总是称它为show()

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

你应该使用showItems()调用它

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

变量 option_list 被用作带有 s 的 options_list

您应该删除这些行中的 s

hideItems(options_list);

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

变量 play_again 被用作 play_agian

你应该写对

hideItems(play_agian);

Atribute.length 被称为 .lengt

你应该写对

if (questionNo < data.lengt)

函数在使用之前需要 go

所以你应该把它写在脚本的开头，这样当你调用时程序知道它是什么以及它是如何工作的

<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";
    }

完整和更正的代码

<!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 class="container">
    <div class="container box">
      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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 未捕获的 ReferenceError ReferenceError：未定义事项 未捕获的ReferenceError：未定义sendcard 未捕获的ReferenceError：Dygraph未定义 未捕获的 ReferenceError：模型未定义 未捕获的ReferenceError：未定义getStr 未捕获的ReferenceError：未定义rgba 未捕获ReferenceError：未定义Activetab 未捕获的ReferenceError：未定义xyz 未定义的Google未定义referenceError HAML未捕获ReferenceError：未定义$
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM