Question

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

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

欢迎任何帮助。（这是我的第一篇帖子，所以我可能犯了任何错误！）

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

Answer 2

每次用户按下按钮检查他们的猜测时，如果正确，您可能希望有一个计数器增量。

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

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

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

echo 2 9|awk '{printf("%.0f\n",$2/$1)}'
4

示例

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

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

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

Answer 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;
}

我也稍微清理了你的代码，你想尝试在没有必要的地方没有空格。在一开始它似乎是压倒性的，但它提高了可读性。我将它存储在全局变量中的原因是，对于使用使用相同名称的变量的库，您永远不会遇到问题。

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

5 个答案:

HTMLBody

JS