函数之间传递参数的问题答案

【问题标题】：Trouble with passing parameters between functions函数之间传递参数的问题
【发布时间】：2021-05-07 08:17:06
【问题描述】：

我正在尝试将我用 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>

【问题讨论】：

标签： javascript if-statement parameter-passing

【解决方案1】：

我已经更新了你的代码 sn-p。您没有使用正确的方法来增加计数，您使用的是=+，而它应该是+=。此外，当将答案传递给 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>

【讨论】：

谢谢！这很有趣，您实际上并没有将答案与随机数进行比较，而是检查了答案是否在数组中。我没有考虑到这一点。但是为什么不将答案与随机进行比较呢？无论如何，您都在同一个函数中使用这两个参数，比较时回答，删除时随机回答。
是的，您也可以这样做。而且我认为将其与随机比较是不错的选择。
我已经更新了使用对比的代码，请看一下。
谢谢！我还注意到删除随机词的位置很重要。我已经在 newWord 函数中删除了它，而您在比较后将其删除。我也理解传递答案，它需要价值。最后，我使用的 words.splice(random, 1) 和 words.splice(words.indexOf(random), 1); 之间有区别吗？你用过？结果是一样的，但我猜你有比我更好的理由:-)
欢迎，其实splice方法是把索引作为第一个参数。如果我们简单地传递 random，它并不代表 words 数组的索引，而是一个字符串值，所以首先我们需要在 words 数组中找到 random 的索引，然后使用 splice 删除单词。我想我可以向您解释这个概念:-)

【解决方案2】：

这里的问题是，不是像wordsWrongCounter += 1; 或wordsWrongCounter++ 那样递增，而是在写成wordsWrongCounter = +1; 时总是用+1 的值覆盖它，意思是assign +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>

【讨论】：

谢谢！您对第一个问题也有建议吗？为什么它不能正确比较答案和随机数？

【解决方案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>

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

【讨论】：

谢谢，比较工作正常。但是这些词每次出现两次，就像两次一样。另外，您是否有理由删除删除随机数组项的行？ words.splice(随机, 1);如果所有项目都通过了，我把它放在那里能够结束游戏。或者你有更好的结束游戏的建议吗？谢谢！
@OsmanP。我想你的问题已经解决了。我必须发出我没有检查过你的洞比赛。如果没有解决，我可以再看一遍。
没问题！这个问题已经解决了，但我可能会发布一个不同的问题，只是一步一步来:-)