CODEWITHSUNDEEP
javascript
Frosty619
Frosty619

Reputation: 1489

Unable to get onClick method to work in JavaScript

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. If it is, the 'correct: ' variable is incremented, and the user sees the score on screen.

Problem: I am unable to get the score-card to update once I input the answer and click "ok". Also, once the page is loaded, the incorrect element is automatically incremented to 1, so the user sees that he got a question wrong, before the game even starts.

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 (rand2 === 0) {
            var rand2 = Math.floor(Math.random() * 100);
        }       
    }

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

    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() {

checkAnsBtn.onclick = mathQuestions.checkAnswer(userAns.textContent);
startButton.onclick = generateQuestion; 
}


window.onload = startProcess;

Upvotes: 0

Views: 61

Answers (1)

James Sutherland
James Sutherland

Reputation: 148

checkAnsBtn.onclick =  function () 
{ 
    mathQuestions.checkAnswer(userAns); 
};

Something like that will create an anonymous function and set it to your onclick, while preserving the parameter.

When you use

checkAnsBtn.onclick = mathQuestions.checkAnswer(userAns.textContent);

You are saying set the onclick method to the result of checkAnswer(userAns.textContent).

Upvotes: 2

Related Questions