如何使用Javascript计算正确答案的数量？答案

【问题标题】：How to count the number of correct answers using Javascript?如何使用Javascript计算正确答案的数量？
【发布时间】：2016-08-24 16:29:34
【问题描述】：

我正在尝试创建一个简单的网站来计算我竖起的手指数（随机数）。但是，我想在网站上添加一些额外的东西。我正在尝试在容器的侧面创建一个计数器，用于计算正确答案的数量，并在用户错误地回答问题时降至零。这是我的网站代码...

    <!doctype html>
<html>
    <head>  
        <title>Changing Website Content</title>
        <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
        <style type="text/css">
            body { 
               background-image: url(nyc.jpg);
               width:100%;
               font-family: 'Open Sans', sans-serif;    
            }
            #main {
                margin: 100px;
                background-color: #ede1e1;
                padding: 50px;
                position: relative;
                top: 50px;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <p>How many fingers am I holding up? Pick a number 1 - 5.</p>
            <input id="fingers" type="text">
            <button type="submit" id="fingerChecker">Guess?</button>
        </div>
        <script type="text/javascript">
           document.getElementById("fingerChecker").onclick = function() {
                var fingers = document.getElementById("fingers").value;
                var random1 = (Math.floor((Math.random() * 5) + 1))
                if (fingers == (random1)) {
                    alert("Yes, you are correct!")
                } else {
                    alert("Nope! I had " + random1);
                }
           }
        </script>
    </body>
</html>

欢迎任何帮助。（这是我的第一篇文章，请原谅我可能犯的任何错误！）

【问题讨论】：

这是什么？家庭作业？
不，这只是我为了好玩而做的事情！ @GottZ

标签： javascript html css web

【解决方案1】：

您应该创建一个分数变量，如果答案正确，则增加分数并将其设置为分数元素的innerHTML。如果用户得到错误答案，则将分数重置为 0。

var score = 0;
document.getElementById("fingerChecker").onclick = function() {

  var fingers = document.getElementById("fingers").value;
  var random1 = (Math.floor((Math.random() * 2) + 1))

  if (fingers == (random1)) {

    alert("Yes, you are correct!");
    score++;
    
  } else {
    alert("Nope! I had " + random1);
    score = 0;
  }
  
 document.getElementById("score").innerHTML = score;
}

<div id="main">

  <p>How many fingers am I holding up? Pick a number 1 - 5.</p>
  <input id="fingers" type="text">
  <button type="submit" id="fingerChecker">Guess?</button>

</div>
<div id="score">0</div>

【讨论】：

你应该移动行 document.getElementById("counter").innerHTML = counter;退出 if 语句，因为无论 if 语句的结果如何，您都在使用该行。重复代码并不酷:(

【解决方案2】：

每次用户按下按钮来检查他们的猜测时，如果它是正确的，你会想要一个计数器增量。

考虑声明一个变量来存储正确答案的数量：

// This will store the number of correct guesses that have been made
var correctAnswers = 0;

然后当用户尝试猜测时，确定它是否正确，增加它并在你的函数中显示更新的值：

<script type="text/javascript">
       // Variable to store your correct answers
       var correctAnswers = 0;
       // When your button is clicked
       document.getElementById("fingerChecker").onclick = function() {
            // Read the value and determine if the guess was correct
            var fingers = document.getElementById("fingers").value;
            var random1 = (Math.floor((Math.random() * 5) + 1))
            if (fingers == (random1)) {
                alert("Yes, you are correct!");
                // Show the number of correct answers (and increment)
                document.getElementById('correct').innerHTML = ++correctAnswers;
            } else {
                alert("Nope! I had " + random1);
            }
       }
</script>

最后，您只需要引用元素即可在标记中显示结果：

<!-- Make an element to display your results -->
You have answered correctly <span id='correct'>0</span> times.

示例

您可以see a working example of this here并在下面演示：

【讨论】：

【解决方案3】：

只需创建一个变量并在每次用户猜测正确时将其递增，并在用户猜测错误时将其设置为 0，而不是将该变量打印到 div。

     <div id="main">
            <p>How many fingers am I holding up? Pick a number 1 - 5.</p>
            <input id="fingers" type="text">
            <button type="submit" id="fingerChecker">Guess?</button>
            <p id="counter">0</p>
        </div>
        <script type="text/javascript">

           var counter = 0;
           document.getElementById("fingerChecker").onclick = function() {

                var fingers = document.getElementById("fingers").value;

                var random1 = (Math.floor((Math.random() * 5) + 1))

                if (fingers == (random1)) {
                    counter ++;
                    alert("Yes, you are correct!")

                } else {
                    counter = 0;
                    alert("Nope! I had " + random1);
                }
             document.getElementById("counter").innerText = counter;
           }
        </script>
    </body>
</html>

【讨论】：

【解决方案4】：

您只需创建一个全局变量并在响应良好时递增。

试试这样的。

<script type="text/javascript">
           var goodanswer=0;
           document.getElementById("fingerChecker").onclick = function() {

            var fingers = document.getElementById("fingers").value;

            var random1 = (Math.floor((Math.random() * 5) + 1))

                if (fingers == (random1)) {

                    alert("Yes, you are correct!");
                    goodanswer++;
                 } else {
                    alert("Nope! I had " + random1);
                    goodanswer=0;
                }
              document.getElementById("answers").innerHTML="Correct answers : "+goodanswer;
           }
    </script>

【讨论】：

【解决方案5】：

HTMLBody

>

<body>
   <div id="main">
     <p>How many fingers am I holding up? Pick a number 1 - 5</p>
     <input id="fingers" type="text">
     <button type="submit" id="fingerChecker">Guess?</button>
     <span id="correct"></span>
   </div>
</body>

JS

var globals = {
    correct : 0
};

document.getElementById("fingerChecker").onclick = function() {
        var fingers = document.getElementById("fingers").value;
        var random1 = (Math.floor((Math.random() * 5) + 1))

        if (fingers == (random1)) {
                        globals.correct++;
            alert("Yes, you are correct!")

        } else {
                        globals.correct = 0;
            alert("Nope! I had " + random1);
        }
        var span = document.getElementById("correct");
        span.textContent = globals.correct;
}

我还稍微清理了您的代码，您想尝试在不必要的地方不要有空格。一开始它可能看起来势不可挡，但它大大提高了可读性。我将它存储在全局变量中的原因是，您永远不会遇到使用使用相同名称的变量的库的问题。

【讨论】：