通过 JQuery 生成数学测验

Question

我的任务是为我的功课编辑一个基本数学测验的外部 javascript 文件（不允许触摸 html 和 css）。我对编程很陌生，并且尝试过这个问题，但它不起作用。我需要一些帮助，所以提前谢谢。

在这个数学测验中，当用户点击“检查”按钮时，会出现一个警告框，告知用户输入的答案是否正确，或者“您没有输入任何内容”。用户关闭警报框后，数学操作数将更改为从 1 到 10 的新随机数，进而生成新问题。这里只使用了加法数学运算符。

我尝试了“回调”功能，在单击警报框按钮后提示随机数的生成，以及“if else”以确定哪些消息出现在警报框上。我不知道错误在哪里，或者我是否一开始就在正确的轨道上 这是我的小提琴http://jsfiddle.net/15t4g4sk/2/

这是我的 jquery

var num1=document.getElementById("number1").value;
var num2=document.getElementById("number2").value;
var total = num1 + num2;
//feedback for click

$(document).ready(function(){ $('input[type="button"]').click(function(){

//if user didn't enter any field
if ($(":text") === '') {
    //callback to generate 2 random numbers
        $("button").click(function(){

    //generate a random number range 1 to 9 for number 1 after clicking alert box using callback function
        document.getElementById("number1").innerHTML =
        Math.floor(Math.random() * 10);

    //generate a random number range 1 to 9 for number 2 after clicking alert box using callback function
        document.getElementById("number2").innerHTML =
        Math.floor(Math.random() * 10);

    //alert box feedback
    alert("You have not key in any answer");


    //if user enter a correct answer
    } else if (answer == total) {
    //callback to generate 2 random numbers
        $("button").click(function(){

    //generate a random number range 1 to 9 for number 1 after clicking alert box using callback function
        document.getElementById("number1").innerHTML =
        Math.floor(Math.random() * 10);

    //generate a random number range 1 to 9 for number 2 after clicking alert box using callback function
        document.getElementById("number2").innerHTML =
        Math.floor(Math.random() * 10);

    //alert box feedback before generating random numbers
        alert("You have key in the wrong answer");
        }); 

    //if user enter a wrong answer
    } else {

    //callback to generate 2 random numbers
        $("button").click(function(){

    //generate a random number range 1 to 10 for number 1 after clicking alert box using callback function
        document.getElementById("number1").innerHTML =
        Math.floor(Math.random() * 11);

    //generate a random number range 1 to 10 for number 2 after clicking alert box using callback function
        document.getElementById("number2").innerHTML =
        Math.floor(Math.random() * 11);

    //alert box feedback before generating random numbers
        alert("You have key in the wrong answer");
                                    }); 
});
}});

Answer 1

这是您的 javascript 代码的完全替代品。

$(document).ready(function(){
    $('input[type="button"]').click(function(){
            //alert box feedback before generating random numbers
        var num1=parseInt($("#number1").text());
        var num2=parseInt($("#number2").text());
        var total = num1 + num2;
        var answer = parseInt($("input[type='text']").val());

        if ($("input[type='text']").val() === '') {
            alert("You have not key in any answer");
        } else if (answer === total) {
            alert("You have key in the right answer");
        } else {
            alert("You have key in the wrong answer");
        }

        //generate a random number range 1 to 9 for number 1 after clicking alert box using callback function
        $("#number1").innerHTML =
        Math.floor(Math.random() * 10);

        //generate a random number range 1 to 9 for number 2 after clicking alert box using callback function
        $("#number2").innerHTML =
        Math.floor(Math.random() * 10);
    });
});

现场演示here;

注意事项：

• 您只需要一个回调/事件处理程序。事件编程的重点是您只定义一次处理程序，而它将被多次调用 - 即。每次发生适当类型的触发事件时。这将是您首先为其注册事件处理程序的类型。

1234563该规则的一个例外是性能优化。对于您的普通界面而言，这应该不是问题。

• 注意类型转换的复杂性。从 dom 读取的所有数据都是字符串（这里稍微简化一下）。您执行的检查是针对数字的。因此，您必须在类型之间进行转换（无论如何这是一个好习惯）。由于重载（尤其是运算符+），js 运行时引擎无法推断出内容的实际类型。

Answer 2

这是最简单的解决方案。所以你可以很容易地理解..

var num1=document.getElementById("number1").value;
var num2=document.getElementById("number2").value;    var total = num1 + num2;    //feedback for click
 $(document).ready(function(){
$("input[type=button]").on("click", function(){
    var num1 = $("#number1").html().trim();
    var num2 = $("#number2").html().trim();
    var sum = parseFloat(num1)+parseFloat(num2);
    var inputsum = $("#sum").val();
    if(sum  == inputsum)
    {
        alert("currect answer");
        $("#number1").html(Math.floor((Math.random() * 10) + 1)); 
        $("#number2").html(Math.floor((Math.random() * 10) + 1)); 
    }
    else{
        alert("wrong answer");
    }
}); });