Javascript HtmlButtoneElement.onclick处的未捕获引用错误
我有一个html和js的测试代码。测验有10个问题，应该有按钮在问题之间移动。 第一个问题很好，但当我尝试回答第二个问题时，控制台中出现以下错误： Game.html:1未捕获引用错误：未定义num 在HTMLButtonElement.onclick（Game.html:1） 我能做些什么来防止这个错误？我试图将js代码复制到html中的script元素，但没有成功 html的代码如下所示：Javascript HtmlButtoneElement.onclick处的未捕获引用错误,javascript,html,error-handling,Javascript,Html,Error Handling,我有一个html和js的测试代码。测验有10个问题，应该有按钮在问题之间移动。 第一个问题很好，但当我尝试回答第二个问题时，控制台中出现以下错误： Game.html:1未捕获引用错误：未定义num 在HTMLButtonElement.onclick（Game.html:1） 我能做些什么来防止这个错误？我试图将js代码复制到html中的script元素，但没有成功 html的代码如下所示： <!DOCTYPE html> <html lang="en"
<!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;
}
游戏
欢迎来到游戏
你的分数
选择正确的答案
问题编号
您需要翻译的单词
以前的
下一个
```
在script.js中，我有以下对象数组：
让食物=[{
“ID”：1，
“单词”：意大利的国菜是什么，
“选项”：[
{名称：'，
{名称：'המבורגר'}，
{名称：“מקעוף”}
],
‘img’：‘img/200.jpg’，
‘正确答案’：‘正确答案’、‘正确答案’、‘正确答案’、‘正确答案’、‘正确答案’、‘正确答案’、‘正确答案’、‘正确答案’、‘正确答案’，
},
{
“ID”：2，
“单词”：“美国的国菜是什么？”，
“选项”：[
{名称：'，
{名称：'פיצה'}，
{名称：'ריזטו'}
],
‘img’：‘img/23.jpg’，
‘正确答案’：‘正确答案’、‘正确答案’、‘正确答案’、‘正确答案’、‘正确答案’、‘正确答案’、‘正确答案’、‘正确答案’、‘正确答案’、‘正确答案’、‘正确答案’、‘正确答案’、‘正确答案’、‘正确答案’、‘正确答案’、‘正确答案’，
},
{
"ID":3,，
‘单词’：‘匈牙利的国菜是什么？’，
“选项”：[
{名称：'ו㪠אש'}，
{名称：'המבורגר'}，
{名称：'
],
‘img’：‘img/21.jpg’，
‘正确答案’：‘正确答案’，
},
{
“ID”：4，
“单词”：“希腊的民族菜是什么？”，
“选项”：[
{名称：'，
{名称：'ו㪠אש'}，
{名称：'המבורגר'}
],
‘img’：‘img/222.jpg’，
‘正确答案’：‘正确答案’，
},
{
“ID”：5，
“单词”：“白俄罗斯的民族菜是什么？”，
“选项”：[
{名称：'לביבה'}，
{名称：'קציתבשר'}，
{名称：“מקעוף”}
],
‘img’：‘img/444.jpg’，
‘正确答案’：‘正确答案’，
},
{
“ID”：6，
“单词”：“英国的国菜是什么？”，
“选项”：[
{名称：“פישאנציס”}，
{name:'ofortheftheftt'}，
{名称：'
],
‘img’：‘img/20.jpg’，
‘正确答案’：‘正确答案’，
},
{
ID:7,，
“单词”：什么是中国国菜，
“选项”：[
{名称：'אורז'}，
{名称：'קציתבקר'}，
{名称：'המבורגר'}
],
‘img’：‘img/486.jpg’，
‘正确答案’：‘正确答案’，
},
{
ID:8,，
“单词”：“法国的国菜是什么？”，
“选项”：[
{名称：'，
{名称：'，
{名称：“לביבות”}
],
‘img’：‘img/22.jpg’，
‘正确答案’：‘正确答案’、‘正确答案’、‘正确答案’、‘正确答案’、‘正确答案’、‘正确答案’、‘正确答案’、‘正确答案’、‘正确答案’，
},
{
“ID”：9，
“单词”：“塞浦路斯的民族菜是什么？”，
“选项”：[
{名称：'חלומי'}，
{名称：'，
{名称：'אורז'}
],
‘img’：‘img/24.jpg’，
‘正确答案’：‘正确答案’，
},
{
“ID”：10，
“单词”：“墨西哥的国菜是什么？”，
“选项”：[
{名称：'，
{名称：'אורז'}，
{名称：“פישאנציס”}
],
‘img’：‘img/264.jpg’，
‘正确答案’：‘正确答案’、‘正确答案’、‘正确答案’、‘正确答案’，
}
]
这个功能是：
分数=0；
函数InitGame（）{
document.getElementById（“问题编号”）.innerHTML=food[0].ID；
document.getElementById（“score”）.innerHTML=score；
document.getElementById（“word”）.innerHTML=food[0].word；
设imgSrc=food[0].img；
设img=document.createElement（“img”）；
img.src=食物[0].img；
img.width='500'；
img.height='300'；
document.getElementById（“图像”）.appendChild（img）；
document.getElementById（“选项”）.innerHTML=
" " +
" " +
"";
document.getElementById（“选项”）.getElementsByTagName（“按钮”）[0]。innerHTML=food[0]。选项[0]。名称；
document.getElementById（“选项”）.getElementsByTagName（“按钮”）[1]。innerHTML=food[0]。选项[1]。名称；
document.getElementById（“选项”）.getElementsByTagName（“按钮”）[2]。innerHTML=food[0]。选项[2]。名称；
}
功能检查答案（问题编号，btn）{
（我在食品方面）
{
if（食物[i].ID==questionNum）
{
设chosed=btn.id；
让答案=食物[i]。选项[chosed-1]。名称；
如果（答案===食物[i]。正确答案）
{
分数=分数+1；
document.getElementById（“score”）.innerHTML=score；
document.getElementById（“message”）.innerHTML=“正确答案”；
nextQuestion（）；
}
其他的
{
得分=得分-0.5；
document.getElementById（“score”）.innerHTML=score；
document.getElementById（“message”）.innerHTML=“回答错误，请重试”；
}
}
}
}
函数nextQuestion（）{
让qNum=document.getElementById（“问题编号”）.innerHTML；
设num=++qNum；
如果（num==10）
{
num=0；
}
document.getElementById（“问题编号”）.innerHTML=num；
document.getElementById（“score”）.innerHTML=score；
document.getElementById（“word”）.innerHTML=food[num].word；
document.getElementById（“图像”）.innerHTML=“”；
让imgSrc=食物