通过 JQuery 生成数学测验

Question

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

在这个数学测验中，当用户点击 "Check" 按钮时，会出现一个警告框，告诉用户输入的答案是正确还是错误，或者是 'you have not entered anything'。用户关闭警告框后，数学操作数将更改为从 1 到 10 的新随机数，这又会生成一个新问题。这里只使用了加法运算符。

我尝试了 'callback' 函数来提示在单击警告框按钮后生成随机数，以及 'if else' 来确定在警报中显示哪些消息盒子。我不知道错误在哪里，或者我一开始是否在正确的轨道上这是我的 fiddle 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

$(文档).ready(函数(){ $('input[type="button"]').click(函数(){

//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；

备注：

您只需要一个回调/事件处理程序。事件编程的重点是您只定义一次处理程序，而它将被多次调用 - 即。每次发生正确类型的触发事件。这将是您首先为其注册事件处理程序的类型。
如果您正在使用 jquery，请始终如一地使用它 - 从 html 查询元素数据时，仅使用 jquery 选择器（$("<your selector")) 或仅 dom 函数（例如 queryElementById("<id>"> ）。该规则的一个例外是性能优化。对于您的普通界面来说，这应该不是问题。
注意类型转换的复杂性。从 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");
    }
}); });

通过 JQuery 生成数学测验

Generating Maths quiz by JQuery

javascript

math

jquery