why the variable count does not increment in js?

October 31, 2022

I’m new to Js .I’m trying to use a function called valider to increment the variable count whenever the user writes a correct answer in the inputs and show the value of count in a pop up using the Alert.

Here is my code. Any help please.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <label>3*2</label> 
        <input type ="text" id="input1"> <br><br>
        <label>6*7</label> 
        <input type ="text" id="input2"> <br><br>
        <label>4*4</label> 
        <input type ="text" id="input3"> <br><br>
        <label>3*5</label> 
        <input type ="text" id="input4"> <br><br>   
        <button type="submit" onclick="valider()">Valider</button>
    </form>
    

    <script>
        var input1 = document.getElementById("input1").value;
        var input2 = document.getElementById("input2").value;
        var input3 = document.getElementById("input3").value;
        var input4 = document.getElementById("input4").value;
        var count = 0;
        
        function valider() {
            if(input1 == 6) {
                count += 1;
            }
            if(input2 == 42) {
                count += 1;
            }
            if(input3== 16) {
                count += 1;
            }
            if(input4 == 15) {
                count += 1;
            }
        alert("Vous avez " + count + " bonnes réponses");
        }

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

>Solution :

The problem is that you only get the values of your input once not on every call to valider. Just get all the values in your function and it should work:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <label>3*2</label> 
        <input type ="text" id="input1"> <br><br>
        <label>6*7</label> 
        <input type ="text" id="input2"> <br><br>
        <label>4*4</label> 
        <input type ="text" id="input3"> <br><br>
        <label>3*5</label> 
        <input type ="text" id="input4"> <br><br>   
        <button type="submit" onclick="valider()">Valider</button>
    </form>
    

    <script>
        function valider() {
            var input1 = document.getElementById("input1").value;
            var input2 = document.getElementById("input2").value;
            var input3 = document.getElementById("input3").value;
            var input4 = document.getElementById("input4").value;
            var count = 0;

            if(input1 == 6) {
                count += 1;
            }
            if(input2 == 42) {
                count += 1;
            }
            if(input3== 16) {
                count += 1;
            }
            if(input4 == 15) {
                count += 1;
            }
            alert("Vous avez " + count + " bonnes réponses");
        }

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

I also moved the count variable inside the function. Otherwise people can enter 1 correct answer and spam the Valider button to increase the count.