Question

我对JavaScript很陌生，但我正在进行一些数学测验。该想法是用户（一年级学生）将一次回答一个问题，然后所有用户的答案将显示在弹出窗口上，该弹出窗口还将显示关于用户是否＆＃39的反馈。答案是对的。我觉得这很好，但我不能为我的生活找出当用户按下＆＃34; Enter时如何提交表单。＆＃34;

非常感谢任何帮助！

HTML：

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Math Worksheet</title>
    <script src="addition.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Englebert' rel='stylesheet' type='text/css'>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
    <form id="formSec">
        <table id="addProblem" width="150" border="0" cellspacing="0" cellpadding="10">
  <tr>
    <td colspan="3" align="center"><h2>Problem <span id="outOf">1</span> of 12</h2></td>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
    <td colspan="1" align="right"><input id="carryOver"></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 onKeyPress="return checkSubmit(event)" id="userAnswer" type="text"></td>
  </tr>
  <tr>
      <td colspan="3"><input id="submit" type="button" onClick="submitAnswer()" value="Submit" /></td>
  </tr>
</table>
    </form>
</body>
</html>

JavaScript的：

// first number in addition problem
var numOne = [48,39,16,43,37,23,44,13,37,28,48,16];   

// second number in addition problem
var numTwo = [16,22,25,18,46,49,18,39,25,17,9,28];

// counter variable
var i = 0;

// array for user answers
var answers = [];

// arrays to display validity
var valid = [];
var equality = [];

// submit when "enter" is pressed
function checkSubmit(e) {
   if(e && e.keyCode == 13)
   {
      document.forms[0].submit();
   }
}

// check and store answer's validity
function submitAnswer() {
    var guessed = Number(document.getElementById('userAnswer').value);
    var checkAnswer = 'Correct!';

    if (guessed != numOne[i]+numTwo[i]) {
        checkAnswer = 'Incorrect!\nThe answer is'+' '+Number(numOne[i]+numTwo[i])+'.';
        valid[i] = 'Incorrect';
        equality[i] = ' &NotEqual; ';
    } else if (guessed == numOne[i]+numTwo[i]) {
        valid[i] = 'Correct';
        equality[i] = ' = ';
    }

    if(confirm(checkAnswer) && i<11) {
        // next problem
        i++;
        document.getElementById('outOf').innerHTML=i+1;
        document.getElementById('firstNum').innerHTML=numOne[i];
        document.getElementById('secondNum').innerHTML=numTwo[i];

        // saves user's answer
        answers.push(document.getElementById('userAnswer').value);

        // reset the answer and carry over to blank
        document.getElementById('userAnswer').value = '';
        document.getElementById('carryOver').value = '';

        // return focus to answer box
        document.getElementById('userAnswer').focus();
    } else if(i==11) { // create popup window with user's answers
        var results=window.open('','name','height=650,width=1000');

        answers.push(document.getElementById('userAnswer').value);

        results.document.write('<html><head><title>Math Worksheet Results</title>');
        results.document.write('<link rel="stylesheet" href="style.css">');
        results.document.write('<link href="http://fonts.googleapis.com/css?family=Englebert" rel="stylesheet" type="text/css">');
        results.document.write('</head><body><div id="resultsMain">');
        results.document.write('<header><h1>Student Results</h1></header><div id="results">');

        results.document.write('<div class="prob"><p class="probNum">1. ' + valid[0] + '</p><p class="userProb">');
        results.document.write(numOne[0] + ' + ' + numTwo[0] + equality[0] + answers[0] + '</p></div>');

        results.document.write('<div class="prob"><p class="probNum">2. ' + valid[1] + '</p><p class="userProb">');
        results.document.write(numOne[1] + ' + ' + numTwo[1] + equality[1] + answers[1] + '</p></div>');

        results.document.write('<div class="prob"><p class="probNum">3. ' + valid[2] + '</p><p class="userProb">');
        results.document.write(numOne[2] + ' + ' + numTwo[2] + equality[2] + answers[2] + '</p></div>');

        results.document.write('<div class="prob"><p class="probNum">4. ' + valid[3] + '</p><p class="userProb">');
        results.document.write(numOne[3] + ' + ' + numTwo[3] + equality[3] + answers[3] + '</p></div>');

        results.document.write('<div class="prob"><p class="probNum">5. ' + valid[4] + '</p><p class="userProb">');
        results.document.write(numOne[4] + ' + ' + numTwo[4] + equality[4] + answers[4] + '</p></div>');

        results.document.write('<div class="prob"><p class="probNum">6. ' + valid[5] + '</p><p class="userProb">');
        results.document.write(numOne[5] + ' + ' + numTwo[5] + equality[5] + answers[5] + '</p></div>');        

        results.document.write('<div class="prob"><p class="probNum">7. ' + valid[6] + '</p><p class="userProb">');
        results.document.write(numOne[6] + ' + ' + numTwo[6] + equality[6] + answers[6] + '</p></div>');

        results.document.write('<div class="prob"><p class="probNum">8. ' + valid[7] + '</p><p class="userProb">');
        results.document.write(numOne[7] + ' + ' + numTwo[7] + equality[7] + answers[7] + '</p></div>');

        results.document.write('<div class="prob"><p class="probNum">9. ' + valid[8] + '</p><p class="userProb">');
        results.document.write(numOne[8] + ' + ' + numTwo[8] + equality[8] + answers[8] + '</p></div>');

        results.document.write('<div class="prob"><p class="probNum">10. ' + valid[9] + '</p><p class="userProb">');
        results.document.write(numOne[9] + ' + ' + numTwo[9] + equality[9] + answers[9] + '</p></div>');

        results.document.write('<div class="prob"><p class="probNum">11. ' + valid[10] + '</p><p class="userProb">');
        results.document.write(numOne[10] + ' + ' + numTwo[10] + equality[10] + answers[10] + '</p></div>');

        results.document.write('<div class="prob"><p class="probNum">12. ' + valid[11] + '</p><p class="userProb">');
        results.document.write(numOne[11] + ' + ' + numTwo[11] + equality[11] + answers[11] + '</p></div>');

        results.document.write('<br class="clear"></div></div></body></html>');
        results.document.close();
    }
}

Answer 1

当您按下

时，您要查找的是表单中输入元素的默认行为

http://jsfiddle.net/sfarsaci/pEJxd/

如果您希望在按Enter键时执行submitAnswer()，则需要将onsubmit事件添加到表单中：onSubmit=submitAnswer();，例如http://jsfiddle.net/sfarsaci/H9vL4/

Answer 2

是否有任何理由无法将document.forms[0].submit();替换为submitAnswer();？

如果您希望表单实际提交（即POST，这不是我认为您的意图），但为了完整起见，您遇到提交语法问题的原因是您有一个名为submit的元素，它有效地覆盖了表单的提交功能。您可以使用此替代方法提交表单（如果您不想重命名该元素）：

HTMLFormElement.prototype.submit.call(document.forms[0]);

JavaScript：在回车时提交表单

2 个答案: