Question

我正在尝试将我在 Python 中创建的内容重写为 Javascript。我在传递变量时遇到问题。这是一个文字游戏：变量 newWord 包含一个来自 words 数组的随机单词，random 被说出并显示 2 秒，之后 createInputField 中会弹出一个输入字段并且变量 answer 需要与 random

中的 checkAnswer 进行比较

我遇到的问题是 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>

Answer 1

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

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>

Answer 2

这里的问题是，当写为 wordsWrongCounter += 1; 表示 < em>为 wordsWrongCounter 分配 +1
这里那里还有一些小事，我会留给你玩。
```
wordsWrongCounter++
```
```
wordsWrongCounter = +1;
```

Answer 3

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

为了尊敬，请参阅下面的我的解决方案：

<!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>

如果您有任何问题，请发表评论。

在函数之间传递参数的问题

3 个答案: