unable to correctly verify user input in javascript

Question

Background: I am making a simple math quiz game in JavaScript, the questions are generated randomly and displayed, and once the user inputs his answer and clicks submit, his answer his checked to see if it's correct. The score card contains two two text elements("correct" and "incorrect") which are updated once the user's answer is verified.

Problem: I am unable to get the score-card to update correctly once I input the answer. Even if I input the correct answer, it is the "incorrect" variable that keeps getting incremented.

var question = document.getElementById("question"); //reference to the div element which displays the numbers from generateQuestions on the board
var userAns = document.getElementById("userAns");  // ref. to input area where user enters his answer 
var checkAnsBtn = document.getElementById("submitAns"); //ref. to area where user clicks once he inputs the answer
var correctAns = document.getElementById("correctAns"); // ref. to area on top of screen which displays number of correct ans
var wrongAns = document.getElementById("wrongAns"); // same as above, 
var startButton = document.getElementById("startGame"); // the question is generated once user clicks this btn


var view = {
     numCorrect: 0,
     numWrong: 0,

    updateStats: function(isCorrect) {

        if (isCorrect) {
            this.numCorrect++;
            correctAns.innerHTML = "correct: "+ this.numCorrect;
        }

        else if (!isCorrect) {  
            this.numWrong ++;
            wrongAns.innerHTML = "incorrect: " + this.numWrong;
        }

        else {
            return null;
        }   
    }
};  

var mathQuestions = {

    rand1: Math.floor(Math.random() * 10),
    rand2: Math.floor(Math.random() * 10),

    operationSign: "",
    assignOperationSign: function() {
        var randOp = Math.floor(Math.random() * 4);

        if (randOp === 0) {
            this.operationSign = "+";
        }

        else if(randOp === 1) {
            this.operationSign = "-";
        }

        else if(randOp === 2) {
            this.operationSign = "/";

            while (rand1 % rand2 != 0) {
                rand1 = Math.floor(Math.random() * 10);
                rand2 = Math.floor(Math.random() * 10);
            };  

            while (rand2 === 0) {
                var rand2 = Math.floor(Math.random() * 100);
            };      
        }

        else {
            this.operationSign = "*";
        }   
        return this.operationSign;
    },
    checkAnswer: function(userA) {
        var numCorrect = 0;
        var numWrong = 0;
        var answer;
        var isCorrect;


        switch(this.operationSign) {
            case "+":
            answer = this.rand1 + this.rand2;
            break;

            case "-":
            answer = this.rand1 - this.rand2;
            break;

            case "/":
            answer = this.rand1 / this.rand2;
            break;

            case "*":
            answer = this.rand1 * this.rand2;
            break;

            default:
            console.log("something went wrong");
        }   


        if (userA === answer) {
            isCorrect = true; 
        }

        else if (userA != answer) {
        isCorrect = false;
        }   

        view.updateStats(isCorrect);                    
    }       
};

function generateQuestion() {
    var question = document.getElementById("question");

    var rand1 = mathQuestions.rand1;
    var rand2 = mathQuestions.rand2;

    var operationSign = mathQuestions.assignOperationSign();

     question.innerHTML = rand1 + " " + operationSign + " " + rand2;    
} 

function startProcess() {
    startButton.onclick = generateQuestion; 
    checkAnsBtn.onclick =  function () {

    var ans = parseInt(userAns.textContent);
    mathQuestions.checkAnswer(ans); 
    };
}

window.onload = startProcess;

EDIT Here is the HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>mathMadness</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/mathMadness.css" />
</head>

<body>

       <div id="startGame"> 
            <input type="submit" id="startGame" value="start" />
        </div>      
       <h1> Math Madness! </h1>
       <div id="correctAns">correct: </div>
       <div id="wrongAns">incorrect: </div>
       <div id="time"> time: </div>

       <div id="problemBoard">
        <h2 id="question"> </h2>

        <input type="text" id="userAns">
        <input type="submit" id="submitAns" value="OK"  />

    </div>


<script src="js/mathMadness.js"></script>
</body> 
</html>

could it be because you are using '===' (triple equals) to check for the correct answer? The triple equals checks value and TYPE of the variable and makes sure both are equal. — wbrugato
– wbrugato, Commented Oct 8, 2015 at 17:28
If you scroll to the bottom of the screen, you will see that before variable is passed to the checkAnswer method, it is parsed as an int. In any case, I tried double equals and nothing changed. Also, I was not aware of this difference between == and ===, thanks! — Frosty619
– Frosty619, Commented Oct 8, 2015 at 17:37
We'll need the HTML to make sure. Is #userAns a textarea? — MinusFour
– MinusFour, Commented Oct 8, 2015 at 17:40

MinusFour · Accepted Answer · 2015-10-08 17:44:50Z

2

You shouldn't be getting the value like this:

var ans = parseInt(userAns.textContent);

Instead you should be getting value:

var ans = parseInt(userAns.value);

Also, take notice on the rand1 and rand2 variables here:

assignOperationSign: function() {
        var randOp = Math.floor(Math.random() * 4);

        if (randOp === 0) {
            this.operationSign = "+";
        }

        else if(randOp === 1) {
            this.operationSign = "-";
        }

        else if(randOp === 2) {
            this.operationSign = "/";

            while (rand1 % rand2 != 0) {
                rand1 = Math.floor(Math.random() * 10);
                rand2 = Math.floor(Math.random() * 10);
            };  

            while (rand2 === 0) {
                var rand2 = Math.floor(Math.random() * 100);
            };      
        }

        else {
            this.operationSign = "*";
        }   
        return this.operationSign;
    }

They are different from mathQuestions.rand1 and mathQuestions.rand2. (You can reach them through this.rand1 and this.rand2).

answered Oct 8, 2015 at 17:44

MinusFour

14.5k4 gold badges32 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Frosty619 Over a year ago

That solved it! Can you explain why textContent did not work? I googled: javascript tectContent vs value and got no insightful answer.

MinusFour Over a year ago

textContent is just the text inside the node (which there isn't any on inputs). value is the contained input value.

Collectives™ on Stack Overflow

unable to correctly verify user input in javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related