无法使用onClick方法在JavaScript中工作

时间:2015-10-07 21:20:40

标签: javascript

背景:我在JavaScript中制作一个简单的数学测验游戏,问题是随机生成并显示的,一旦用户输入他的答案并点击提交,他的答案就会检查,看看是否& #39;是对的。如果是,那么正确:'变量增加,用户在屏幕上看到分数。

问题:输入答案后点击"确定"我无法更新记分卡。此外,一旦页面加载,不正确的元素会自动增加到1,因此用户在游戏开始之前就会看到他的问题出错了。

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;

1 个答案:

答案 0 :(得分:2)

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

这样的东西会创建一个匿名函数并将其设置为你的onclick,同时保留参数。

使用时

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

您说的是将onclick方法设置为checkAnswer(userAns.textContent)的结果。