javascript - HTMLButtonElement.onclick上未捕获的ReferenceError-6ren

javascript - HTMLButtonElement.onclick上未捕获的ReferenceError

转载作者：行者123 更新时间：2023-12-03 08:38:54

我在html和js中有一个测验代码。测验有10个问题，应该有在两个问题之间移动的按钮。
第一个问题工作正常，但是当我尝试回答第二个问题时，我在控制台中收到此错误:
Game.html:1未捕获的ReferenceError:未定义num
在HTMLButtonElement.onclick(Game.html:1)
我该怎么做才能防止此错误？我试图将js代码复制到html中的script元素，但是没有用。
html的代码如下所示:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Game</title>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body id="gameBody" onload="InitGame()">

    <h1>Welcome to the game</h1>
    <h3 class="header">Your score</h3>
    <h3 class="text" id="score"></h3>
    <h5 class="header">Choose the right answer</h5>
    <p class="header">The question number</p>
    <p class="text" id="questionNumber"></p>
    <p class="header">The word you need to translate</p>
    <p id="word"></p>
    <div id="image">

    </div>
    <div id="options">

    </div>
    <p id="message"></p>
    <button class="myChoise" onclick="prevQuestion()">Previous</button>
    <button class="myChoise" onclick="nextQuestion()">Next</button>
   
</body>
</html>  ```

And in script.js I have this array of objects :

let food=[{
    'ID':1,
    'word':'What is the national dish of Italy',
    'options':[
        {name : 'פסטה, פיצה, ריזוטו'},
        {name : 'המבורגר'},
        {name : 'מרק עוף'}
    ],
    'img':'img/200.jpg',
    'rightAnswer':'פסטה, פיצה, ריזוטו',
  },
  {
    'ID':2,
    'word':'What is the national dish of the United States?',
    'options':[
        {name : 'המבורגר, נקנקיה בלחמניה, פאי '},
        {name : 'פיצה'},
        {name : 'ריזוטו'}
    ],
    'img':'img/23.jpg',
    'rightAnswer':'המבורגר, נקנקיה בלחמניה, פאי',
  },
  {
    'ID':3,
    'word':'What is the national dish of Hungary?',
    'options':[
        {name : 'גולאש'},
        {name : 'המבורגר'},
        {name : 'נקנקיה בלחמניה'}
    ],
    'img':'img/21.jpg',
    'rightAnswer':'גולאש',
  },
  {
    'ID':4,
    'word':'What is the national dish of Greece?',
    'options':[
        {name : 'מוסקה,סלט יווני'},
        {name : 'גולאש'},
        {name : 'המבורגר'}
    ],
    'img':'img/222.jpg',
    'rightAnswer':'סלט יווני,מוסקה',
  },
  {
    'ID':5,
    'word':'What is the national dish of Belarus?',
    'options':[
        {name : 'לביבה'},
        {name : 'קציצות בשר'},
        {name : 'מרק עוף'}
    ],
    'img':'img/444.jpg',
    'rightAnswer':'לביבה',
  },
  {
    'ID':6,
    'word':'What is the national dish of the United Kingdom?',
    'options':[
        {name : ' פיש אנד ציפס'},
        {name : 'ответ'},
        {name : 'название'}
    ],
    'img':'img/20.jpg',
    'rightAnswer':' פיש אנד ציפס',
  },
  {
    'ID':7,
    'word':'What is China national dish?',
    'options':[
        {name : 'אורז'},
        {name : 'קציצות בקר'},
        {name : 'המבורגר'}
    ],
    'img':'img/486.jpg',
    'rightAnswer':'אורז',
  },
  {
    'ID':8,
    'word':'What is the national dish of France?',
    'options':[
        {name : 'באגט, קרואסון, פואה גרא'},
        {name : 'נקנקיה בלחמניה'},
        {name : 'לביבות'}
    ],
    'img':'img/22.jpg',
    'rightAnswer':'באגט, קרואסון, פואה גרא',
  },
  {
    'ID':9,
    'word':'What is the national dish of Cyprus?',
    'options':[
        {name : 'חלומי'},
        {name : 'באגט'},
        {name : 'אורז'}
    ],
    'img':'img/24.jpg',
    'rightAnswer':'חלומי',
  },
  {
    'ID':10,
    'word':'What is the national dish of Mexico?',
    'options':[
        {name : 'טאקו, גואקמולי'},
        {name : 'אורז'},
        {name : 'פיש אנד ציפס'}
    ],
    'img':'img/264.jpg',
    'rightAnswer':'טאקו,גואקמולי',
  }
]


And this functions :

let score = 0;
function InitGame(){
 document.getElementById("questionNumber").innerHTML = food[0].ID;
    document.getElementById("score").innerHTML= score;
    document.getElementById("word").innerHTML= food[0].word;
    let imgSrc = food[0].img;
    let img = document.createElement("img");
    img.src = food[0].img;
    img.width = '500';
    img.height = '300';
    document.getElementById("image").appendChild(img);
    document.getElementById("options").innerHTML =
    "<button class='btn' id='1' onclick='checkAnswer(food[0].ID,this)'></button> " +
     "<button class='btn' id='2' onclick='checkAnswer(food[0].ID,this)'></button> " +
     "<button class='btn' id='3' onclick='checkAnswer(food[0].ID,this)'></button>";
    document.getElementById("options").getElementsByTagName('button')[0].innerHTML = food[0].options[0].name;
    document.getElementById("options").getElementsByTagName('button')[1].innerHTML = food[0].options[1].name;
    document.getElementById("options").getElementsByTagName('button')[2].innerHTML = food[0].options[2].name; 
}

function checkAnswer(questionNum,btn){
 for(i in food)
            {
                if(food[i].ID === questionNum)
                {
                    let chosed = btn.id;
                    let answer = food[i].options[chosed-1].name;
                    if(answer === food[i].rightAnswer)
                    {
                        score = score+1;
                        document.getElementById("score").innerHTML= score;
                        document.getElementById("message").innerHTML = "Right answer";
                        nextQuestion();
                    }
                    else
                    {
                        score = score-0.5;
                        document.getElementById("score").innerHTML= score;
                        document.getElementById("message").innerHTML = "wrong answer, please try again";
                    }
                }
            } 
}

function nextQuestion(){
   let qNum = document.getElementById("questionNumber").innerHTML;
   let num = ++qNum;
   if(num === 10)
        {
            num = 0;
        }
        document.getElementById("questionNumber").innerHTML = num;
        document.getElementById("score").innerHTML= score;
        document.getElementById("word").innerHTML= food[num].word;
        document.getElementById("image").innerHTML="";
        let imgSrc = food[num].img;
        let img = document.createElement("img");
        img.src = food[num].img;
        img.width = '500';
        img.height = '300';
        document.getElementById("image").appendChild(img);
        document.getElementById("options").innerHTML="";
        document.getElementById("options").innerHTML =
        "<button class='btn' id='1' onclick='checkAnswer(food[num].ID,this)'></button> " +
        "<button class='btn' id='2' onclick='checkAnswer(food[num].ID,this)'></button> " +
        "<button class='btn' id='3' onclick='checkAnswer(food[num].ID,this)'></button>";
        document.getElementById("options").getElementsByTagName('button')[0].innerHTML = food[num].options[0].name;
        document.getElementById("options").getElementsByTagName('button')[1].innerHTML = food[num].options[1].name;
        document.getElementById("options").getElementsByTagName('button')[2].innerHTML = food[num].options[2].name;

}


function prevQuestion(){
 let qNum = document.getElementById("questionNumber").innerHTML;
        let num = --qNum;
if(num === -1)
        {
            num = 10;
        }
        document.getElementById("questionNumber").innerHTML = num;
        document.getElementById("score").innerHTML= score;
        document.getElementById("word").innerHTML= food[num].word;
        document.getElementById("image").innerHTML="";
        let imgSrc = food[num].img;
        let img = document.createElement("img");
        img.src = food[num].img;
        img.width = '500';
        img.height = '300';
        document.getElementById("image").appendChild(img);
        document.getElementById("options").innerHTML="";
        document.getElementById("options").innerHTML =
        `<button class='btn' id='1' onclick='checkAnswer(food[num].ID,this)'></button> <button class='btn' id='2' onclick='checkAnswer(food[num].ID,this)'></button> <button class='btn' id='3' onclick='checkAnswer(food[num].ID,this)'></button>`;
        document.getElementById("options").getElementsByTagName('button')[0].innerHTML = food[num].options[0].name;
        document.getElementById("options").getElementsByTagName('button')[1].innerHTML = food[num].options[1].name;
        document.getElementById("options").getElementsByTagName('button')[2].innerHTML = food[num].options[2].name;
}

最佳答案

您获取num is not defined的原因是，您在这种情况下设置了像'checkAnswer(food[num].ID,this)'这样的内部HTML，因此在函数中数字未引用num变量，而是应使用'checkAnswer(food[" + num + "].ID,this)'，以便当html呈现而不是num时，它将像这个checkAnswer(food[9].ID,this)

let food = [{
    'ID': 1,
    'word': 'What is the national dish of Italy',
    'options': [{
        name: 'פסטה, פיצה, ריזוטו'
      },
      {
        name: 'המבורגר'
      },
      {
        name: 'מרק עוף'
      }
    ],
    'img': 'img/200.jpg',
    'rightAnswer': 'פסטה, פיצה, ריזוטו',
  },
  {
    'ID': 2,
    'word': 'What is the national dish of the United States?',
    'options': [{
        name: 'המבורגר, נקנקיה בלחמניה, פאי'
      },
      {
        name: 'פיצה'
      },
      {
        name: 'ריזוטו'
      }
    ],
    'img': 'img/23.jpg',
    'rightAnswer': 'המבורגר, נקנקיה בלחמניה, פאי',
  },
  {
    'ID': 3,
    'word': 'What is the national dish of Hungary?',
    'options': [{
        name: 'גולאש'
      },
      {
        name: 'המבורגר'
      },
      {
        name: 'נקנקיה בלחמניה'
      }
    ],
    'img': 'img/21.jpg',
    'rightAnswer': 'גולאש',
  },
  {
    'ID': 4,
    'word': 'What is the national dish of Greece?',
    'options': [{
        name: 'מוסקה,סלט יווני'
      },
      {
        name: 'גולאש'
      },
      {
        name: 'המבורגר'
      }
    ],
    'img': 'img/222.jpg',
    'rightAnswer': 'מוסקה,סלט יווני',
  },
  {
    'ID': 5,
    'word': 'What is the national dish of Belarus?',
    'options': [{
        name: 'לביבה'
      },
      {
        name: 'קציצות בשר'
      },
      {
        name: 'מרק עוף'
      }
    ],
    'img': 'img/444.jpg',
    'rightAnswer': 'לביבה',
  },
  {
    'ID': 6,
    'word': 'What is the national dish of the United Kingdom?',
    'options': [{
        name: ' פיש אנד ציפס'
      },
      {
        name: 'ответ'
      },
      {
        name: 'название'
      }
    ],
    'img': 'img/20.jpg',
    'rightAnswer': ' פיש אנד ציפס',
  },
  {
    'ID': 7,
    'word': 'What is China national dish?',
    'options': [{
        name: 'אורז'
      },
      {
        name: 'קציצות בקר'
      },
      {
        name: 'המבורגר'
      }
    ],
    'img': 'img/486.jpg',
    'rightAnswer': 'אורז',
  },
  {
    'ID': 8,
    'word': 'What is the national dish of France?',
    'options': [{
        name: 'באגט, קרואסון, פואה גרא'
      },
      {
        name: 'נקנקיה בלחמניה'
      },
      {
        name: 'לביבות'
      }
    ],
    'img': 'img/22.jpg',
    'rightAnswer': 'באגט, קרואסון, פואה גרא',
  },
  {
    'ID': 9,
    'word': 'What is the national dish of Cyprus?',
    'options': [{
        name: 'חלומי'
      },
      {
        name: 'באגט'
      },
      {
        name: 'אורז'
      }
    ],
    'img': 'img/24.jpg',
    'rightAnswer': 'חלומי',
  },
  {
    'ID': 10,
    'word': 'What is the national dish of Mexico?',
    'options': [{
        name: 'טאקו,גואקמולי'
      },
      {
        name: 'אורז'
      },
      {
        name: 'פיש אנד ציפס'
      }
    ],
    'img': 'img/264.jpg',
    'rightAnswer': 'טאקו,גואקמולי',
  }
]

let score = 0;

function InitGame() {
  document.getElementById("questionNumber").innerHTML = food[0].ID;
  document.getElementById("score").innerHTML = score;
  document.getElementById("word").innerHTML = food[0].word;
  let imgSrc = food[0].img;
  let img = document.createElement("img");
  img.src = food[0].img;
  img.width = '500';
  img.height = '300';
  document.getElementById("image").appendChild(img);
  document.getElementById("options").innerHTML =
    "<button class='btn' id='1' onclick='checkAnswer(food[0].ID,this)'></button> " +
    "<button class='btn' id='2' onclick='checkAnswer(food[0].ID,this)'></button> " +
    "<button class='btn' id='3' onclick='checkAnswer(food[0].ID,this)'></button>";
  document.getElementById("options").getElementsByTagName('button')[0].innerHTML = food[0].options[0].name;
  document.getElementById("options").getElementsByTagName('button')[1].innerHTML = food[0].options[1].name;
  document.getElementById("options").getElementsByTagName('button')[2].innerHTML = food[0].options[2].name;
}

function checkAnswer(questionNum, btn) {
  debugger
  for (i in food) {
    if (food[i].ID === questionNum) {
      let chosed = btn.id;
      let answer = food[i].options[chosed - 1].name;
      if (answer === food[i].rightAnswer) {
        score = score + 1;
        document.getElementById("score").innerHTML = score;
        document.getElementById("message").innerHTML = "Right answer";
        nextQuestion();
      } else {
        score = score - 0.5;
        document.getElementById("score").innerHTML = score;
        document.getElementById("message").innerHTML = "wrong answer, please try again";
      }
    }
  }
}

function nextQuestion() {
  let qNum = document.getElementById("questionNumber").innerHTML;
  let num = ++qNum;
  if (num === 10) {
    num = 0;
  }
  document.getElementById("questionNumber").innerHTML = num;
  document.getElementById("score").innerHTML = score;
  document.getElementById("word").innerHTML = food[num].word;
  document.getElementById("image").innerHTML = "";
  let imgSrc = food[num].img;
  let img = document.createElement("img");
  img.src = food[num].img;
  img.width = '500';
  img.height = '300';
  document.getElementById("image").appendChild(img);
  document.getElementById("options").innerHTML = "";
  document.getElementById("options").innerHTML =
    "<button class='btn' id='1' onclick='checkAnswer(food[" + num + "].ID,this)'></button> " +
    "<button class='btn' id='2' onclick='checkAnswer(food[" + num + "].ID,this)'></button> " +
    "<button class='btn' id='3' onclick='checkAnswer(food[" + num + "].ID,this)'></button>";
  document.getElementById("options").getElementsByTagName('button')[0].innerHTML = food[num].options[0].name;
  document.getElementById("options").getElementsByTagName('button')[1].innerHTML = food[num].options[1].name;
  document.getElementById("options").getElementsByTagName('button')[2].innerHTML = food[num].options[2].name;
  debugger;
}


function prevQuestion() {
  let qNum = document.getElementById("questionNumber").innerHTML;
  let num = --qNum;
  if (num === -1) {
    num = 10;
  }
  document.getElementById("questionNumber").innerHTML = num;
  document.getElementById("score").innerHTML = score;
  document.getElementById("word").innerHTML = food[num].word;
  document.getElementById("image").innerHTML = "";
  let imgSrc = food[num].img;
  let img = document.createElement("img");
  img.src = food[num].img;
  img.width = '500';
  img.height = '300';
  document.getElementById("image").appendChild(img);
  document.getElementById("options").innerHTML = "";
  document.getElementById("options").innerHTML =
    `<button class='btn' id='1' onclick='checkAnswer(food[` + num + `].ID,this)'></button> <button class='btn' id='2' onclick='checkAnswer(food[` + num + `].ID,this)'></button> <button class='btn' id='3' onclick='checkAnswer(food[` + num + `].ID,this)'></button>`;
  document.getElementById("options").getElementsByTagName('button')[0].innerHTML = food[num].options[0].name;
  document.getElementById("options").getElementsByTagName('button')[1].innerHTML = food[num].options[1].name;
  document.getElementById("options").getElementsByTagName('button')[2].innerHTML = food[num].options[2].name;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Game</title>
</head>

<body id="gameBody" onload="InitGame()">

  <h1>Welcome to the game</h1>
  <h3 class="header">Your score</h3>
  <h3 class="text" id="score"></h3>
  <h5 class="header">Choose the right answer</h5>
  <p class="header">The question number</p>
  <p class="text" id="questionNumber"></p>
  <p class="header">The word you need to translate</p>
  <p id="word"></p>
  <div id="image">

  </div>
  <div id="options">

  </div>
  <p id="message"></p>
  <button class="myChoise" onclick="prevQuestion()">Previous</button>
  <button class="myChoise" onclick="nextQuestion()">Next</button>

</body>

</html>

关于javascript - HTMLButtonElement.onclick上未捕获的ReferenceError，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64023541/

文章推荐： php - Symfony表单未显示正确的错误(正在星座图上)

文章推荐： python - (Python)不显示多个引发的ValueErrors

java - 几个 "ChildException"捕获 block 与一个 "Exception"捕获 block
多个 ChildException catch block 和一个 Exception catch block 之间哪个更好？更好，我的意思是以良好的实践方式。举例说明: public stati
通过测试连接进行Powershell尝试/捕获
我正在尝试将脱机计算机记录在文本文件中，以便以后可以再次运行它们。似乎没有被记录或捕获。 function Get-ComputerNameChange { [CmdletBinding()]
scala - 拦截与尝试/捕获
我正在将 Scala 'try/catch' 测试代码转换为使用 'intercept' 有没有我不应该使用“拦截”的场景？使用 'intercept' 而不是 'try/catch' 的唯一好处是简
erlang - 如何在Erlang中进行尝试/捕获
我对erlang很陌生，我正在尝试使用基本的try/catch语句来工作。我正在使用Webmachine处理一些请求，我真正想做的就是解析一些JSON数据并将其返回。如果JSON数据无效，我只想返回一
delphi - 捕获 'delete'按键
我不知道如何捕获删除按键。我发现在 ASCII 代码表中，它位于 127 位，但是 if (Key = #127) then 却无济于事。然后我检查了 VK_DELETE 的值，它是 47。尝试使用
php - 对所有PDO查询进行一次全局尝试{}捕获{}
我很少在失败时对数据库查询使用唯一的错误消息我经常使用简短的标准消息，例如“数据库错误/失败。请与网站管理员联系”或类似的消息。或自动发送给我我正在寻找一种在PDO中全局设置一次try {}和ca
Java : CompletableFuture 捕获
我有一个变量CompletableFuture completableFuture 。我希望能够使用任何类型的对象来完成它。例如:completableFuture.complete(new Stri
Java 捕获 IOException
我认为这是基本的东西，但我不知道该怎么做。为什么我得到 IOException never throw in body of相应的 try 语句 public static void main(Str
java - 捕获 JSONException
我在此代码中遇到 JSON 异常: JSONObject jObject = new JSONObject(JSONString); pontosUsuario.setIdUsuari
单引号之间的 Perl 捕获
我正在尝试打印出用单引号括起来的文本。 /bin/bash -lc '/home/CASPER_REPORTS/scripts/CASPER_gen_report.sh CASPER_1' /bin/
java - 捕获 IllegalArgumentException？
我这里遇到了一点问题。我想弄清楚如何捕获 IllegalArgumentException。对于我的程序，如果用户输入负整数，程序应该捕获 IllegalArgumentException 并询问用户
java - 捕获 EJBTransactionRolledbackException
我无法理解 EJBTransactionRolledbackException。我有实体: @Entity public class MyEntity { @Id @Generate
.net - 实时网络使用统计监控/捕获？
对于我给自己提出的以下挑战，如果社区的经验给我任何建议，我将不胜感激 - 即，这里有任何关于最佳方法/方向的指示吗？要求允许收集/实时监控从用户 Windows PC 到一组特定 IP 地址(或
exception - 捕获 SAPSQL_DATA_LOSS
我想在我的 ABAP 代码中捕获并处理 SAPSQL_DATA_LOSS。我试过这个: try. SELECT * FROM (rtab_name) AS rtab
java - 捕获 UnsatisfiedLinkError
我知道捕获错误不是一个好的做法，但在这种情况下，这样做很重要。我正在尝试运行一个包含游戏一部分的 jar，但它给了我一个 unsatisfiedlink 错误，但这是有趣的部分:我正在使用这段代码:
java - 捕获 GenericJDBCException
我有一个表单页面，当我保存它时，它会覆盖数据库。表单页面中有一个文本框，允许用户输入 4000 个字符，但如果用户输入的字符超过此值，则会出现以下错误: ERROR 15:54:05 Abstrac
Python键绑定(bind)/捕获
我想知道在python中绑定(bind)键的最简单方法例如，默认的 python 控制台窗口出现并等待，然后在 psuedo -> if key "Y" is pressed: print (
java - 捕获 NumberFormatException
下面是别人写的类。我面临的问题是，当它进入parse method时与 null as the rawString ，它正在扔NumberFormatException 。所以我想做的是，我应该捕
jquery - 捕获/拦截所有鼠标点击
我有一个简单的脚本，可以捕获所有鼠标单击，除非您单击实际有效的内容。链接、Flash 视频等。我如何调整它，以便无论用户点击什么，在视频加载、新页面加载等之前，它都会发送我构建的简单 GET 请求？
当选择列表值更改而没有更改事件时，Jquery 捕获
我有一个带有一些选择列表的表单，当选择某些值时，这些列表将显示/隐藏更多输入字段。问题是大多数用户都是数据输入人员，因此他们在输入数据时大量使用键盘，并且选择列表的 change 事件仅在焦点离开输

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - HTMLButtonElement.onclick上未捕获的ReferenceError