个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-02 15:34:55 24 4
gpt4 key购买 nike

背景:我正在用 JavaScript 制作一个简单的数学测验游戏，问题是随机生成并显示的，一旦用户输入答案并单击提交，就会检查他的答案是否正确正确的。记分卡包含两个两个文本元素(“正确”和“不正确”)，一旦用户的答案得到验证，这些文本元素就会更新。

问题:输入答案后，我无法正确更新记分卡。即使我输入了正确的答案，“不正确”的变量也会不断增加。

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>

最佳答案

您不应该获得这样的值:

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 - 无法正确验证javascript中的用户输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33022285/

24 4 0
文章推荐： javascript - Ember.JS最佳实践: Model vs Controller field binding
文章推荐： javascript - 日期范围选择器使用 AJAX 发送选定的日期
文章推荐： firefox - 如何在 Mozilla Firefox 中创建屏幕共享扩展
文章推荐： R - ave rollapply 错误 : k <= n is not TRUE
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com