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(这仅适用于前 2 个“数学问题”，只是为了让这个问题保持简单。

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