Question

背景：我在JavaScript中制作一个简单的数学测验游戏，问题是随机生成并显示的，一旦用户输入他的答案并点击提交，他的答案就会检查，看看是否＆＃39;是对的。记分卡包含两个文本元素（＆＃34;正确＆＃34;和＆＃34;不正确＆＃34;），一旦用户的答案得到验证，就会更新。

问题：输入答案后，我无法正确更新记分卡。即使我输入了正确的答案，也是＆＃34;不正确的＆＃34;不断增加的变量。

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;

编辑以下是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>

Answer 1

你不应该得到这样的价值：

var ans = parseInt(userAns.textContent);

相反，你应该得到value：

var ans = parseInt(userAns.value);

另外，请注意rand1和rand2变量：

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

它们与mathQuestions.rand1和mathQuestions.rand2不同。（您可以通过this.rand1和this.rand2）与他们联系。

无法在javascript中正确验证用户输入

1 个答案: