Javascript using for loops with array lists

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

Please define "not working". What you expect your code to do, and what it does instead? — Teemu
– Teemu, Commented Sep 13, 2018 at 5:25
Where I wrote "They then press the (check answer button) and it should display the following." however mine says all are incorrect. Also I should mention (ill edit the question in a moment) I've just made the HTML for the first 2 "math problems" just to keep things simple — tom
– tom, Commented Sep 13, 2018 at 5:26

CRayen · Accepted Answer · 2018-09-13 13:34:43Z

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>

edited Sep 13, 2018 at 13:34

answered Sep 13, 2018 at 5:42

CRayen

5792 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tom Over a year ago

you wouldn't know how to change the font colour of "correct" by any chance?

CRayen Over a year ago

Please find the updated code snippet in the answer. Hope that helps.

Collectives™ on Stack Overflow

Javascript using for loops with array lists

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related