在函数之间传递参数时出现故障

我正试图将我在Python中制作的东西重写为Javascript。我在传递变量时遇到了问题。这是一个文字游戏：变量newWord包含来自words-数组的一个随机单词，random被说出并显示2s，之后createInputField中弹出一个输入字段，变量answer需要与checkAnswer中的random进行比较

我遇到的问题是checkAnswer工作不正常。每个answer都显示为正确。其次，wordsCorrectCounter保持在1，尽管answer被测试为正确的3次。

function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
var words = ["meget", "går", "mor"];
var wordsWrong = [];
var wordsCorrectCounter = 0;
var wordsWrongCounter = 0;
function textToAudio(random) 
{
let msg = random;
let speech = new SpeechSynthesisUtterance();
speech.lang = "da-DK";
speech.text = msg;
speech.volume = 1;
speech.rate = 0.5;
speech.pitch = 1;
window.speechSynthesis.speak(speech);
}

async function newWord(words)
{
if (words.length === 0){
endGame();
}
else {
var random = Math.floor(Math.random() * words.length);
document.getElementById("Empty").innerHTML = words[random];
textToAudio(words[random]);
await sleep(2000);
textToAudio(words[random]);
words.splice(random, 1);
document.getElementById("Empty").innerHTML = "       ";
createInputField(words[random]);
}
};
function createInputField(random)
{
var answer = document.createElement("input");
answer.setAttribute("type", "text");
answer.id = "inputfield";
document.body.appendChild(answer)
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(answer))

}
function checkAnswer(random, answer)
{
if (answer === words[random]){
console.log("correct");
wordsCorrectCounter = +1;
console.log(wordsCorrectCounter)
document.getElementById("okBtn").remove();
document.getElementById("inputfield").remove();
newWord(words);
}
else{
console.log("wrong");
wordsWrongCounter = +1;
console.log(wordsWrongCounter)
document.getElementById("okBtn").remove();
document.getElementById("inputfield").remove();
newWord(words);
}
};
document.getElementById("startGame").addEventListener("click", () => newWord(words));
function endGame()
{
document.getElementById("Empty").innerHTML = "you are done!" + "Correct: " + wordsCorrectCounter + "Wrong: " + wordsWrongCounter;
};

<!DOCTYPE html>
<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>
</div>
</body>
</html>

我已经更新了您的代码片段。您没有使用正确的方式来增加计数，您使用的是=+，而它应该是+=。此外，当将答案传递给checkAnswer时，它没有值，因此它始终为true。

function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
var words = ["meget", "går", "mor"];
var wordsWrong = [];
var wordsCorrectCounter = 0;
var wordsWrongCounter = 0;
function textToAudio(random) 
{
let msg = random;
let speech = new SpeechSynthesisUtterance();
speech.lang = "da-DK";
speech.text = msg;
speech.volume = 1;
speech.rate = 0.5;
speech.pitch = 1;
window.speechSynthesis.speak(speech);
}

async function newWord(words)
{
if (words.length === 0){
endGame();
}
else {
var random = Math.floor(Math.random() * words.length);
document.getElementById("Empty").innerHTML = words[random];
textToAudio(words[random]);
await sleep(2000);
textToAudio(words[random]);
document.getElementById("Empty").innerHTML = "       ";
createInputField(words[random]);
}
};
function createInputField(random)
{
var answer = document.createElement("input");
answer.setAttribute("type", "text");
answer.id = "inputfield";
document.body.appendChild(answer)
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(answer.value, random))
}
function checkAnswer(answer, random)
{
if (answer == random){
console.log("correct");
wordsCorrectCounter += 1;
console.log(wordsCorrectCounter)
document.getElementById("okBtn").remove();
document.getElementById("inputfield").remove();
}
else{
console.log("wrong");
wordsWrongCounter += 1;
console.log(wordsWrongCounter)
document.getElementById("okBtn").remove();
document.getElementById("inputfield").remove();
}
words.splice(words.indexOf(random), 1);
newWord(words);
};
document.getElementById("startGame").addEventListener("click", () => newWord(words));
function endGame()
{
document.getElementById("Empty").innerHTML = "you are done!" + "Correct: " + wordsCorrectCounter + "Wrong: " + wordsWrongCounter;
};

<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>
</div>

这里的问题是，不是像wordsWrongCounter += 1;或wordsWrongCounter++那样递增，而是在写为wordsWrongCounter = +1;时总是用值+1覆盖它，这意味着将+1分配给wordsWrongCounter

这里和那里还有一些小东西，我会留给你玩。

function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
var words = ["meget", "går", "mor"];
var wordsWrong = [];
var wordsCorrectCounter = 0;
var wordsWrongCounter = 0;
function textToAudio(random) {
let msg = random;
let speech = new SpeechSynthesisUtterance();
speech.lang = "da-DK";
speech.text = msg;
speech.volume = 1;
speech.rate = 0.5;
speech.pitch = 1;
window.speechSynthesis.speak(speech);
}
async function newWord(words) {
if (words.length === 0) {
endGame();
} else {
var random = Math.floor(Math.random() * words.length);
document.getElementById("Empty").innerHTML = words[random];
textToAudio(words[random]);
await sleep(2000);
textToAudio(words[random]);
words.splice(random, 1);
document.getElementById("Empty").innerHTML = "       ";
createInputField(words[random]);
}
};
function createInputField(random) {
var answer = document.createElement("input");
answer.setAttribute("type", "text");
answer.id = "inputfield";
document.body.appendChild(answer)
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(answer))
}
function checkAnswer(random, answer) {
if (answer === words[random]) {
console.log("correct");
wordsCorrectCounter += 1;
console.log(wordsCorrectCounter)
document.getElementById("okBtn").remove();
document.getElementById("inputfield").remove();
newWord(words);
} else {
console.log("wrong");
wordsWrongCounter += 1;
console.log(wordsWrongCounter)
document.getElementById("okBtn").remove();
document.getElementById("inputfield").remove();
newWord(words);
}
};
document.getElementById("startGame").addEventListener("click", () => newWord(words));
function endGame() {
document.getElementById("Empty").innerHTML = "you are done!" + "Correct: " + wordsCorrectCounter + "Wrong: " + wordsWrongCounter;
};

<!DOCTYPE html>
<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>
</div>
</body>
</html>

正如您所指出的，您的代码中存在多个错误。首先，您没有将newWord中的正确变量传递给createInputField。我建议你清理你的命名，并将所选的随机单词存储到它自己的变量中。稍后，您传递的是input字段本身，而不是User提供的输入值。最后一个错误是我们的计数，但这很小，但在上面的错误中，在未定义的行为中很难调试。

出于尊敬，请参阅下面的解决方案：

<!DOCTYPE html>
<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>
</div>
<script>
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
var words = ["meget", "går", "mor"];
var wordsWrong = [];
var wordsCorrectCounter = 0;
var wordsWrongCounter = 0;
function textToAudio(random) {
let msg = random;
let speech = new SpeechSynthesisUtterance();
speech.lang = "da-DK";
speech.text = msg;
speech.volume = 1;
speech.rate = 0.5;
speech.pitch = 1;
window.speechSynthesis.speak(speech);
}
async function newWord(words) {
if (words.length === 0) {
endGame();
}
else {
var randint = Math.floor(Math.random() * words.length);
randomWord = words[randint]
document.getElementById("Empty").innerHTML = randomWord;
textToAudio(randomWord);
await sleep(2000);
textToAudio(randomWord);
document.getElementById("Empty").innerHTML = "       ";
createInputField(randomWord);
}
};
function createInputField(random) {
console.log(random)
var answer = document.createElement("input");
answer.setAttribute("type", "text");
answer.id = "inputfield";
document.body.appendChild(answer)
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(answer.value, random))
}
function checkAnswer(input, answer) {
if (answer == input) {
console.log("correct");
wordsCorrectCounter++;
}
else {
console.log("wrong");
wordsWrongCounter++;
}
console.log("Corret Answers: " + wordsCorrectCouter);
console.log("Wrong Answers: " + wordsWrongCounter);
document.getElementById("okBtn").remove();
document.getElementById("inputfield").remove();
newWord(words);
};
document.getElementById("startGame").addEventListener("click", () => newWord(words));
function endGame() {
document.getElementById("Empty").innerHTML = "you are done!" + "Correct: " + wordsCorrectCounter + "Wrong: " + wordsWrongCounter;
};


</script>
</body>
</html>

如果你有任何问题，请留下评论。

相关内容

最新更新

热门标签：