Javascript使用帶有數組列表的for循環

Question

我需要制作一個看起來像這樣的網頁

（產生問題）...這是一個按鈕

？ x 1 =（）

？ x 2 =（）

...

？ x 9 =（）

（檢查答案）...這也是一個按鈕

當按下按鈕時（生成問題），首先提示用戶選擇一個數字。假設他們選擇了2。因此上面的列表將執行以下操作。

2 x 1 =（）

2 x 2 =（）

...

2 x 9 =（）

然后，用戶仔細檢查並填充空白處，如下所示：

2 x 1 =（2）

2 x 2 =（7）

...

2 x 9 =（18）

然后，他們按下（檢查答案按鈕），它應該顯示以下內容。

2 x 1 =（2）正確

2 x 2 =（7）錯誤

...

2 x 9 =（18）正確

這是java腳本

var number;

function chickenWing()
{
    number = prompt("Enter number for multiplication");

    var changeNumber = document.getElementsByClassName("chooseNumber");

       for(var i = 0; i < changeNumber.length; i++)
       {
            changeNumber[i].innerHTML = number;
       }

}

function chickenDrumStick()
{
    var array = document.getElementsByClassName("apple")

    for(var i = 0; i < array.length; i++)
    {
        var cheese = 0;
        cheese = cheese + 1;
    }
    var correctAnswer = cheese + number;



    var array1 = document.getElementsByClassName("inPut");
        for(var i = 0; i < array1.length; i++)
        {
            var userAnswer = Number(array1.value);
        }

    var array2 = document.getElementsByClassName("result")
        for(var i = 0; i < array2.length; i++)
        {
            if(userAnswer == correctAnswer)
            {
                array2[i].innerHTML = "Correct!";
            }

            else
            {
                array2[i].innerHTML = "Incorrect, please try again.";
            }
        }
}

這就是HTML（這僅用於前兩個“數學問題”，只是為了使問題簡單起見。

<button onClick="chickenWing()">Generate question</button>
    <br/>
    <br/>
        <span class = "chooseNumber">?</span>
        <span class = "apple"> x 1 = </span>
            <input type = "text" size = "6px" class = "inPut "/>
        <span class = "result"></span>
    <br/>
    <br/>
        <span class = "chooseNumber">?</span>
        <span class = "apple"> x 2 = </span>
            <input type = "text" size = "6px" class = "inPut"/>
        <span class = "result"></span>
    <br/>
    <br/>
<button onClick="chickenDrumStick()">Check answer</button>

我不確定為什么這不起作用！

Answer 1

修改了一下代碼。 通過刪除不必要的迭代來簡化它。 希望這可以幫助。

 var number; function chickenWing() { number = prompt("Enter number for multiplication"); var changeNumber = document.getElementsByClassName("chooseNumber"); for(var i = 0; i < changeNumber.length; i++) { changeNumber[i].innerHTML = number; } } function chickenDrumStick() { var array = document.getElementsByClassName("apple") var array1 = document.getElementsByClassName("inPut"); var array2 = document.getElementsByClassName("result") for(var i = 0; i < array.length; i++) { if(Number(array1[i].value) == ((i+1) * number)) { array2[i].innerHTML = "Correct!"; array2[i].classList.add('correct'); array2[i].classList.remove('incorrect'); } else { array2[i].innerHTML = "Incorrect, please try again."; array2[i].classList.add('incorrect'); array2[i].classList.remove('correct'); } } } 

 .correct { color:green; } .incorrect { color:red; } 

 <button onClick="chickenWing()">Generate question</button> <br/> <br/> <span class = "chooseNumber">?</span> <span class = "apple"> x 1 = </span> <input type = "text" size = "6px" class = "inPut "/> <span class = "result"></span> <br/> <br/> <span class = "chooseNumber">?</span> <span class = "apple"> x 2 = </span> <input type = "text" size = "6px" class = "inPut"/> <span class = "result"></span> <br/> <br/> <button onClick="chickenDrumStick()">Check answer</button>