【发布时间】：2021-05-14 18:19:55
【问题描述】：
我这周刚开始学习 Javascript 来编写一个文字游戏来帮助我的孩子。这个想法是它应该显示和播放来自dictionary 的random 单词，她写道，entry 被选中，random 被从dictionary 中删除。游戏一直持续到字典length===0，有错字就总结。不知何故，该程序是不可预测的，它实际上是七分之一的工作，我不明白为什么。给出以下错误：
Uncaught (in promise) TypeError: Cannot read property 'word' of undefined
我确实认为这与我删除random 的方式有关，或者检查dictonary 是否为空。代码下方粘贴了指向 console.log 屏幕截图的链接； 1 是程序完全完成的结果，另一个是没有完成的结果。有趣的是，错误也是不可预知的，有时只是 1 个字，有时是 2 个字。我唯一要做的就是刷新页面，程序的行为会有所不同。我也尝试在不同的浏览器上运行它。
作为一个菜鸟，我很惊讶我在尝试做同样的事情时得到了不同的结果。发现发生了什么非常令人沮丧:-)
<html>
<head>
<title>Aliyah's dictee spel</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<h1>Hej! Velkommen til Aliyahs diktee!</h1>
</div>
<div id="Random_word">
<h2 id="Empty">Click start to start</h2>
<button id="startGame">Start</button>
<button id="editList">Edit word list</button>
<h3 id="correctWord"></h3>
</div>
<script>
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
var dictionary = [
{ word: "apple",
audio: 'apple.mp3',
},
{
word: "baby",
audio: 'baby.mp3',
},
{
word: "car",
audio: 'car.mp3'
}
];
var wordsWrong = [];
var wordsCorrectCounter = 0;
var wordsWrongCounter = 0;
//var cheer = new Audio('correct.mp3');
//var boo = new Audio('wrong.mp3');
function editWords(){
console.log("under construction");
};
function startGame(){
document.getElementById("startGame").remove();
document.getElementById("editList").remove();
newWord(dictionary);
};
async function newWord(dictionary)
{
if (Object.entries(dictionary).length === 0){
endGame();
}
else {
var random = Math.floor(Math.random() * dictionary.length);
document.getElementById("Empty").innerHTML = dictionary[random].word;
console.log(dictionary[random].word);
console.log(dictionary);
await sleep(2000);
document.getElementById("Empty").innerHTML = " ";
createInputField(random);
}
};
function createInputField(random)
{
var entry = document.createElement("input");
entry.setAttribute("type", "text");
entry.id = "inputfield";
document.body.appendChild(entry);
let btn = document.createElement("button");
btn.id = "okBtn";
btn.innerHTML = "ok";
btn.type = "submit";
btn.name = "answerBtn";
document.body.appendChild(btn);
document.getElementById("okBtn").addEventListener("click", () => checkAnswer(random, entry.value));
};
function checkAnswer(random, entry)
{var answer = entry.toLowerCase();
if (dictionary[random].word == answer){
//cheer.play();
wordsCorrectCounter += 1;
document.getElementById("okBtn").remove();
document.getElementById("inputfield").remove();
delete dictionary[random];
console.log(dictionary);
newWord(dictionary);
}
else{
wordsWrong.push(dictionary[random].word);
wordsWrongCounter += 1;
document.getElementById("okBtn").remove();
document.getElementById("inputfield").remove();
//boo.play();
document.body.style.backgroundColor = "red";
document.getElementById("correctWord").innerHTML = dictionary[random].word;
let btn = document.createElement("button");
btn.id = "contBtn";
btn.innerHTML = "Continue";
btn.type = "submit";
btn.name = "continueBtn";
document.body.appendChild(btn);
document.getElementById("contBtn").addEventListener("click", () => wrongAnswer(random));
}
};
function wrongAnswer(random){
document.getElementById("contBtn").remove();
document.getElementById("correctWord").innerHTML = " "
delete dictionary[random];
newWord(dictionary);
};
function endGame()
{
document.getElementById("Empty").innerHTML = "you are done!" + "Correct: " + wordsCorrectCounter + "Wrong: " + wordsWrongCounter
+ "These words were wrong: " + wordsWrong;
};
function Refresh() {
window.parent.location = window.parent.location.href;
};
document.getElementById("startGame").addEventListener("click", () => startGame());
</script>
</body>
</html>
【问题讨论】：
-
表示你的随机值不在你的数组范围内
-
比随机更简单的事情就是在开始时对数组进行洗牌并读取第一个索引并将其删除。
-
考虑编辑您的问题以将控制台日志显示为文本而不是图像。如果你这样做了，我会给你一个向上的箭头。
-
感谢您的反馈。我考虑过，但它看起来不像打印屏幕那样对读者友好，而且似乎没有任何好处，因为你不需要复制/粘贴它。好吧，至少我是这么认为的。但我下次一定会的！
标签： javascript google-chrome dictionary random