Javascript 随机值不在数组/字典的范围内
我这周刚开始学习Javascript，写一个文字游戏来帮助我的孩子。这个想法是，它应该显示并播放Javascript 随机值不在数组/字典的范围内,javascript,google-chrome,dictionary,random,Javascript,Google Chrome,Dictionary,Random,我这周刚开始学习Javascript，写一个文字游戏来帮助我的孩子。这个想法是，它应该显示并播放字典中的随机单词，她将其写入检查条目，并从字典中删除随机。游戏一直持续到字典length==0，如果有错误的单词，则会对其进行总结。不知何故，这个程序是不可预测的，它实际上7次工作1次，我不明白为什么。给出以下错误： 未捕获（承诺中）TypeError:无法读取未定义的属性“word” 我确实认为这与我删除random，或者检查dictional是否为空有关。代码下面粘贴了指向console.log屏
字典中的随机
单词，她将其写入检查条目
，并从字典中删除随机
。游戏一直持续到字典length==0
，如果有错误的单词，则会对其进行总结。不知何故，这个程序是不可预测的，它实际上7次工作1次，我不明白为什么。给出以下错误：
未捕获（承诺中）TypeError:无法读取未定义的属性“word”
我确实认为这与我删除random
，或者检查dictional
是否为空有关。代码下面粘贴了指向console.log屏幕截图的链接；1是程序完全完成的结果，另一个不是。有趣的是，这个错误也是不可预测的，有时在一个单词之后，有时在两个单词之后。我所做的唯一一件事就是刷新页面，程序的行为就会有所不同。我还尝试在不同的浏览器上运行它
作为一个彻头彻尾的傻瓜，我很惊讶我在尝试做同样的事情时得到了不同的结果。发现所发生的事情是相当令人沮丧的：——）
阿莉亚的口述
嘿！直到你被命令！
单击“开始”开始
开始
编辑字表
功能睡眠（ms）{
返回新承诺（resolve=>setTimeout（resolve，ms））；
}
变量字典=[
{单词：“苹果”，
音频：“apple.mp3”，
},
{
单词：“宝贝”，
音频：“baby.mp3”，
},
{
字：“汽车”，
音频：“car.mp3”
}
];
var-wordsWrong=[]；
var wordscorectcounter=0；
var wordsWrongCounter=0；
//var cheel=新音频（'correct.mp3'）；
//var boo=新音频（'error.mp3'）；
函数editWords（）{
控制台日志（“在建”）；
};
函数startName（）{
document.getElementById（“startName”）.remove（）；
document.getElementById（“editList”）.remove（）；
新词（词典）；
};
异步函数新词（字典）
{
if（Object.entries（dictionary.length==0）{
结束游戏（）；
}
否则{
var random=Math.floor（Math.random（）*dictionary.length）；
document.getElementById（“空”）.innerHTML=字典[random].word；
console.log（dictionary[random].word）；
console.log（字典）；
等待睡眠（2000年）；
document.getElementById（“空”）.innerHTML=“”；
createInputField（随机）；
}
};
函数createInputField（随机）
{
var entry=document.createElement（“输入”）；
entry.setAttribute（“类型”、“文本”）；
entry.id=“inputfield”；
单据.正文.附件子项（分录）；
设btn=document.createElement（“按钮”）；
btn.id=“okBtn”；
btn.innerHTML=“确定”；
btn.type=“提交”；
btn.name=“answerBtn”；
文件.正文.附件（btn）；
document.getElementById（“okBtn”）.addEventListener（“单击”，（）=>checkAnswer（随机，条目.value））；
};
功能检查答案（随机、输入）
{var answer=entry.toLowerCase（）；
如果（字典[随机]。单词==答案）{
//加油。玩（）；
wordscorectcounter+=1；
document.getElementById（“okBtn”）.remove（）；
document.getElementById（“inputfield”）.remove（）；
删除字典[随机]；
console.log（字典）；
新词（词典）；
}
否则{
wordsWrong.push（字典[random].word）；
wordswrong计数器+=1；
document.getElementById（“okBtn”）.remove（）；
document.getElementById（“inputfield”）.remove（）；
//boo.play（）；
document.body.style.backgroundColor=“红色”；
document.getElementById（“correctWord”）.innerHTML=字典[random].word；
设btn=document.createElement（“按钮”）；
btn.id=“contBtn”；
btn.innerHTML=“继续”；
btn.type=“提交”；
btn.name=“continueBtn”；
文件.正文.附件（btn）；
document.getElementById（“contBtn”）.addEventListener（“单击”，（）=>错误答案（随机））；
}
};
函数错误答案（随机）{
document.getElementById（“contBtn”）.remove（）；
document.getElementById（“correctWord”）.innerHTML=“”
删除字典[随机]；
新词（词典）；
};
函数endGame（）
{
document.getElementById（“Empty”）.innerHTML=“完成！”+“正确：”+WordsRectCounter+“错误：”+wordsWrongCounter
+"这句话错了:"字荣,；
};
函数刷新（）{
window.parent.location=window.parent.location.href；
};
document.getElementById（“startName”）.addEventListener（“单击”，（）=>startName（））；
我刚从您的代码中了解到这个问题，这只是一个概念性的问题，没有什么大不了的
您可以看到，在删除单词（对象）后，字典（数组）的长度仍然相同。
因为您使用了：delete
关键字，该关键字删除一个项目并将其替换为empty
，数组大小保持不变。
因此，删除第一个单词后的新词典变成：[empty，{…}，{…}]
现在，每当您尝试获取字典[0]时，word会给您一个错误：无法读取undefine的属性，因为它是空的
而不是使用delete<
<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>
dictionary = [
{ word: "apple", audio: 'apple.mp3', },
{ word: "baby", audio: 'baby.mp3', },
{ word: "car", audio: 'car.mp3' }
];
dictionary = [
{ word: "apple", audio: 'apple.mp3', },
{ word: "baby", audio: 'baby.mp3', },
];