How to loop through questions

Question

I'm trying to create a simple addition quiz where the user adds two numbers, presses "Submit," and is then presented with the next problem. I'm trying to use arrays to put together the problem because I'm going to have to (eventually) store the user's answers and compare them with the correct answers. For now though, I'd be really happy to just get the next problem to show up when the user presses "Submit."

http://jsfiddle.net/ZwwLh/4

HTML:

<form>
<table id="addProblem" width="150" border="0" cellspacing="0" cellpadding="10">
  <tr>
    <td>&nbsp;</td>
    <td colspan="1" align="right"><input id="carryOver"></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td colspan="2" align="right" id="firstNum">48</td>
  </tr>
  <tr>
    <td>+</td>
    <td colspan="2" align="right" id="secondNum">16</td>
  </tr>
  <tr>
    <td colspan="3"><hr id="sepLine"></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td colspan="2" align="right"><input id="userAnswer" type="text"></td>
  </tr>
  <tr>
    <td colspan="3"><button onclick="checkAnswer()">Submit</button></td>
  </tr>
</table>
    </form>

JavaScript:

var numOne = [48,39,16,43,37,23,44,13,37,28,48,16];    // first number in addition problem
var numTwo = [16,22,25,18,46,49,18,39,25,17,9,28];     // second number in addition problem

var i = 0;

function checkAnswer() {
    // assigns guessed number to variable
    var guess = Number(document.getElementById('userAnswer').value);

    if (guess == numOne[i]+numTwo[i]) {
        if(confirm("Correct!")) {
            // next question
            i++;
            document.getElementById('firstNum').innerHTML=numOne[i];
            document.getElementById('secondNum').innerHTML=numTwo[i];
        }
    } else {
        if(confirm("Incorrect")) {
            // next question
            i++;
            document.getElementById('firstNum').innerHTML=numOne[i];
            document.getElementById('secondNum').innerHTML=numTwo[i];           
        }
    }
}

Answer 1

getElementById takes a string as the parameter, so you need to do this:

document.getElementById('numOne').innerHTML=numOne[i]; //notice the single quotes around numOne

you might want to rename your numOne and numTwo variables as they might confuse you with the IDs you are using for the TDs.

Answer 2

    var numOne = [48, 39, 16, 43, 37, 23, 44, 13, 37, 28, 48, 16];
    var numTwo = [16, 22, 25, 18, 46, 49, 18, 39, 25, 17, 9, 28];
    var i = 0;

    window.onload = function () {
        a = document.getElementById('firstNum').innerHTML = numOne[i];
        b = document.getElementById('secondNum').innerHTML = numTwo[i];
        i++;
    }
    function clicked() {
        var c = a + b;
        var guess = document.getElementById('userAnswer').value;
        if (guess == c) {
            alert('correct');
        }
        else {
            alert('incorrect');
        }
        a = document.getElementById('firstNum').innerHTML = numOne[i];
        b = document.getElementById('secondNum').innerHTML = numTwo[i];
        i++;
    }


<form>
    <table id="addProblem" width="150" border="0" cellspacing="0" cellpadding="10">
        <tr>
            <td></td>
            <td colspan="2" align="right" id="firstNum"></td>
        </tr>
        <tr>
            <td>+</td>
            <td colspan="2" align="right" id="secondNum"></td>
        </tr>
        <tr>
            <td colspan="3">
                <hr id="sepLine">
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td colspan="2" align="right">
                <input type="text" id="userAnswer" />
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <input type="button" onclick="clicked();" value="Submit"/>
            </td>
        </tr>
    </table>
</form>

or you can use a multidimensional array

    //var numOne = [48, 39, 16, 43, 37, 23, 44, 13, 37, 28, 48, 16];
    //var numTwo = [16, 22, 25, 18, 46, 49, 18, 39, 25, 17, 9, 28];
    score = 0;
    var md = [
        [48, 16],
        [39, 22],
        [16, 25],
        [43, 18],
        [37, 46],
        [23, 49],
        [44, 18],
        [13, 39],
        [37, 25],
        [28, 17],
        [48, 9],
        [16, 28],
    ];
    var i = 0;
    var j = 1;
    var z = 0;
    window.onload = function () {
        a = document.getElementById('firstNum').innerHTML = md[i][i];
        b = document.getElementById('secondNum').innerHTML = md[i][j];
        i++;
    }
    function clicked() {
        var c = a + b;
        var guess = document.getElementById('userAnswer').value;
        if (guess == c) {
            alert('correct');
            score++;
            document.getElementById('score').innerHTML = 'Number right: ' + score;
        }
        else {
            alert('incorrect');
        }
        a = document.getElementById('firstNum').innerHTML = md[i][z];
        b = document.getElementById('secondNum').innerHTML = md[i][j];
        i++;
    }