在 Javascript 中添加事件侦听器使我的（简单）数学加倍

Question

我将尝试尽可能简洁，但超出了我的理解范围（我应该在婴儿池中：）

我正在尝试为我的儿子制作一个简单的网站，该网站会随机显示一个句子，副词应为空白。 然后用户必须猜测下面出现的三个随机词中的哪一个是副词。 然后我尝试实施一个评分系统，这就是我的问题所在。

我让它工作正常，当按钮是 static 时，但是由于随机化并将事件侦听器添加到答案按钮，它在分数上增加了两个而不是一个。 问题代码在底部（//向按钮添加事件监听器）

另一个问题是，当有人错误地回答第一个问题时，我的代码会说他们有“未定义的正确答案”。 我不能说“0 个正确答案”

  <head>
    <title>Adverb Kings</title>
  </head>
  <body>
    <h1>Adverb Kings</h1>

    <div id="sentence"></div>

    <div>
      <button type="button" onclick="right()"></button>
      <button type="button" onclick="wrong()"></button>
      <button type="button" onclick="wrong()"></button>
        
        <div id="result"></div>
      <div id="correct"></div>
      <div id="attempted"></div>
      

    </div>
    
    <script>
//define right functions
function right() {
    correctAlert();
    correctAnswer();
    answersAttempted();
    }
//define wrong functions
function wrong() {
    incorrectAlert();
    answersAttempted();
    }
//alert correct 
function correctAlert() {
    var element = document.getElementById("result");
    element.classList.add("correct");
    element.innerHTML = "Correct";
    }
        
//alert incorrect
function incorrectAlert() {
    var element = document.getElementById("result");
    element.classList.add("incorrect");
    element.innerHTML = "Incorrect, try again.";
    }
    
//tracking correct answers
function correctAnswer() {
    
        if (sessionStorage.correct) {sessionStorage.correct = Number(sessionStorage.correct)+1;
} else {
      sessionStorage.correct = 1;
    }
     
}
   
//tracking attempted questions count
function answersAttempted() {
  if (typeof(Storage) !== "undefined") {
    if (sessionStorage.attempts) {
      sessionStorage.attempts = Number(sessionStorage.attempts)+1;
    } else {
      sessionStorage.attempts = 1;
    }
    document.getElementById("attempted").innerHTML = "You have attempted " + sessionStorage.attempts + " question(s) in this session and got " + sessionStorage.correct + " correct" ;
  } else {
    document.getElementById("attempted").innerHTML = "Sorry, your browser does not support web storage...";
  }
}
         
//create sentence array
var sentence;
      sentence = ['The people _______ went crazy about the new game options', 'The man _______ slipped his hands around his desk handle', 'He _______ typed a new password for his school account'];

      //randomise sentence array
      var el = document.getElementById('sentence');
      el.textContent = sentence[Math.floor(Math.random() * sentence.length)];

      //set order of words in order to randomise
      var orders = [0, 1, 2];
      shuffle(orders);
      
      //add event listeners to buttons
      var buttons = document.getElementsByTagName("button");
      buttons[orders[0]].addEventListener('click', right);
      buttons[orders[1]].addEventListener('click', wrong);
      buttons[orders[2]].addEventListener('click', wrong);
      
      //create and randomise adverb array
      var adverbs = ['slowly', 'quickly', 'insanely'];
      buttons[orders[0]].textContent = adverbs[Math.floor(Math.random() * adverbs.length)];

      //create and randomise other words
      var other1 = ['burger', 'insane', 'ugly'];
      buttons[orders[1]].textContent = other1[Math.floor(Math.random() * other1.length)];
      var other2 = ['sausage', 'fist', 'gun'];
      buttons[orders[2]].textContent = other2[Math.floor(Math.random() * other2.length)];
      
      //shuffle position of adverb
      function shuffle(array) {
        array.sort(() => Math.random() - 0.5);
      }

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

Answer 1

您正在 HTML 和 JS 中添加事件侦听器。

删除 HTML 中按钮的 onclick="..." 部分，一切都应该是好的。

要停止未定义数字，请在调用任何函数之前将 sessionStorage.correct 设置为 0：

<script>
    sessionStorage.correct = 0;
    ...

Answer 2

您在 HTML 中添加了两次事件侦听器，在 js 代码中添加了一次事件侦听器，因此它被击中了两次。 关于未定义的值，当第一次遇到错误时 session 存储未初始化，因此显示未定义。 请检查下面的 js 代码，我在其中注释了 js 事件侦听器并初始化了 sessionstorage.correct，现在它工作正常。

代码

                                //define right functions
                                function right() {
                                    
                                    correctAlert();
                                    correctAnswer();
                                    answersAttempted();
                                    }
                                //define wrong functions
                                function wrong() {
                                    incorrectAlert();
                                    answersAttempted();
                                    }
                                //alert correct 
                                function correctAlert() {
                                    var element = document.getElementById("result");
                                    element.classList.add("correct");
                                    element.innerHTML = "Correct";
                                    }
                                        
                                //alert incorrect
                                function incorrectAlert() {
                                    var element = document.getElementById("result");
                                    element.classList.add("incorrect");
                                    element.innerHTML = "Incorrect, try again.";
                                  
                                    }
                                    
                                //tracking correct answers
                                function correctAnswer() {
                                    
                                        if (sessionStorage.correct) {sessionStorage.correct = Number(sessionStorage.correct)+1;
                                         
                                            
                                } else {
                                    sessionStorage.correct = 1;
                                    }
                                    
                                }
                                
                                //tracking attempted questions count
                                function answersAttempted() {
                                if (typeof(Storage) !== "undefined") {
                                    if (sessionStorage.attempts) {
                                    sessionStorage.attempts = Number(sessionStorage.attempts)+1;
                                    
                                    } else {
                                    sessionStorage.attempts = 1;
                               
                                    }
                                    // initializing sessionStorage.correct
                                    if(!sessionStorage.correct) {
                                        sessionStorage.correct=0;
                                    }
                                    document.getElementById("attempted").innerHTML = "You have attempted " + sessionStorage.attempts + " question(s) in this session and got " + sessionStorage.correct + " correct" ;
                                } else {
                                    document.getElementById("attempted").innerHTML = "Sorry, your browser does not support web storage...";
                                }
                                }
                                        
                                //create sentence array
                                var sentence;
                                    sentence = ['The people _______ went crazy about the new game options', 'The man _______ slipped his hands around his desk handle', 'He _______ typed a new password for his school account'];
                                
                                    //randomise sentence array
                                    var el = document.getElementById('sentence');
                                    el.textContent = sentence[Math.floor(Math.random() * sentence.length)];
                                
                                    //set order of words in order to randomise
                                    var orders = [0, 1, 2];
                                    shuffle(orders);
                                    
                                    //add event listeners to buttons
                                    var buttons = document.getElementsByTagName("button");
                                    //  buttons[orders[0]].addEventListener('click', right);
                                    // buttons[orders[1]].addEventListener('click', wrong);
                                    // buttons[orders[2]].addEventListener('click', wrong);
                                    
                                    //create and randomise adverb array
                                    var adverbs = ['slowly', 'quickly', 'insanely'];
                                    buttons[orders[0]].textContent = adverbs[Math.floor(Math.random() * adverbs.length)];
                                
                                    //create and randomise other words
                                    var other1 = ['burger', 'insane', 'ugly'];
                                    buttons[orders[1]].textContent = other1[Math.floor(Math.random() * other1.length)];
                                    var other2 = ['sausage', 'fist', 'gun'];
                                    buttons[orders[2]].textContent = other2[Math.floor(Math.random() * other2.length)];
                                    
                                    //shuffle position of adverb
                                    function shuffle(array) {
                                        array.sort(() => Math.random() - 0.5);
                                    }