How To Count The Number Of Correct Answers Using Javascript?

I'm trying to create a simple website about counting the number of fingers I'm putting up (random number). However, I want to add something extra to the website. I'm trying to crea

Solution 1:

You should create a score variable and if the answer is correct increase the score and set it to the innerHTML of a score element. If the user gets an incorrect answer reset the score to 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>

Solution 2:

Each time the user presses the button to check their guess, you would want to have a counter increment if it was correct.

Consider declaring a variable to store the number of correct answers :

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

And then when the user attempts a guess, determine if it was correct, increment it and display the updated value within your function :

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

and finally, you'll just need to reference the element to display your results within your markup :

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

Example

You can see a working example of this here and demonstrated below :

Solution 3:

Just create a variable and increment it each time user guesses correctly and set it to 0 when user guesses wrong, than print that variable to a 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>

Solution 4:

You just have to create a global variable and increment when it's a good response.

Try something like this.

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

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

I also cleaned your code up a bit, you want to try and not have whitespace where it isnt necessary. At the start it may seem overwhelming but it improves the readability by quite a margin. The reason i stored it in a globals variabele is that you will never run into problems with a library that uses a variabel that uses the same name.