Javascript使用带有数组列表的for循环

Question

I need to make a webpage that looks something like this

(generate question)...this is a button

? x 1 = ( )

? x 2 = ( )

...

? x 9 = ( )

(check answer)...this is also a button

The user is first prompt to choose a number when pressing the button (generate question).. hypothetically they choose 2. So the above list will do the following.

2 x 1 = ( )

2 x 2 = ( )

...

2 x 9 = ( )

The user then goes through and fills in the empty spots like so:

2 x 1 = ( 2 )

2 x 2 = ( 7 )

...

2 x 9 = ( 18 )

They then press the (check answer button) and it should display the following..

2 x 1 = ( 2 ) correct

2 x 2 = ( 7 ) incorrect

...

2 x 9 = ( 18 ) correct

This is the java script

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.";
            }
        }
}

And this is the HTML (this is only for the first 2 "math questions" just to keep things simple for the sake of this question.

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

Im not sure why this is not working!!

Answer 1

Modified your code a bit. Simplified it by removing unnecessary iterations. Hope this helps.

 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>