如何循环问题

Question

我正在尝试创建一个简单的添加测验，其中用户添加两个数字，按“提交”，然后呈现下一个问题。我正在尝试使用数组来解决问题，因为我将不得不（最终）存储用户的答案并将其与正确的答案进行比较。但就目前而言，当用户按下“提交”时，我真的很高兴能够显示下一个问题。

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将字符串作为参数，因此您需要执行以下操作：

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

您可能希望重命名numOne和numTwo变量，因为它们可能会将您与TD用于的TD混淆。

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>

或者您可以使用多维数组

    //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++;
    }