由JQuery生成數學測驗

Question

我的任務是爲我的作業（不允許觸摸html和css）編輯基礎數學測驗的外部JavaScript文件。我對編程非常陌生，並試圖解決這個問題，但它不起作用。我需要一些幫助，所以在此先感謝。

在這個數學測驗中，當用戶點擊「檢查」按鈕時，將出現一個警告框，告訴用戶是否正確或錯誤地輸入了答案，或者「你沒有輸入任何東西」。用戶解除警告框後，數學操作數將變爲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 

$（文件）。就緒（函數（）{ $（ '輸入[類型= 「按鈕」]'）。點擊（函數（）{

//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"); 
    } 
}); });