Question

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

在这个数学测验中，当用户点击＆＃34;检查＆＃34;按钮，将出现一个警告框，告诉用户是否正确或错误地输入了答案，或者您没有输入任何内容＆＃39;。在用户关闭警报框后，数学操作数将更改为1到10之间的新随机数，从而生成新问题。此处仅使用了附加数学运算符。

我已经尝试了回调＆＃39;用于在单击警告框按钮后提示生成随机数，以及“如果否则”＃39;确定警报框中显示哪些消息。我不知道错误在哪里，或者我是否在第一时间走上了正确的轨道这是我的小提琴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

（文档）$。就绪（函数（）{ $（＆＃39;输入[类型=＆＃34;按钮＆＃34;]＆＃39）。单击（函数（）{

//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生成数学测验

2 个答案: