我对JavaScript很陌生,但我正在进行一些数学测验。该想法是用户(一年级学生)将一次回答一个问题,然后所有用户的答案将显示在弹出窗口上,该弹出窗口还将显示关于用户是否&#39的反馈。答案是对的。我觉得这很好,但我不能为我的生活找出当用户按下" Enter时如何提交表单。"
非常感谢任何帮助!
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"> </td>
<td colspan="1" align="right"><input id="carryOver"></td>
</tr>
<tr>
<td> </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> </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] = ' ≠ ';
} 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();
}
}
答案 0 :(得分:1)
当您按下
时,您要查找的是表单中输入元素的默认行为http://jsfiddle.net/sfarsaci/pEJxd/
如果您希望在按Enter键时执行submitAnswer()
,则需要将onsubmit事件添加到表单中:onSubmit=submitAnswer();
,例如http://jsfiddle.net/sfarsaci/H9vL4/
答案 1 :(得分:0)
是否有任何理由无法将document.forms[0].submit();
替换为submitAnswer();
?
如果您希望表单实际提交(即POST,这不是我认为您的意图),但为了完整起见,您遇到提交语法问题的原因是您有一个名为submit
的元素,它有效地覆盖了表单的提交功能。您可以使用此替代方法提交表单(如果您不想重命名该元素):
HTMLFormElement.prototype.submit.call(document.forms[0]);