我正在创建一个硬编码在 HTML 表单中的多项选择测试,我正在使用 JavaScript 和 jQuery 来执行与该表单相关的所有操作。但是,我的 onClick 事件似乎没有触发。查看控制台,我发现它 Hook 到 ID 为“submission”的事件,并且它移动到“on”,在点击事件时它刷新浏览器而不是触发 submitAnswers() 函数。
<form name="javaScriptQuiz" id="jsTest">
<div class="form-group quiz-questions">
<h3>1. First question is either true or false.</h3>
<label for="q1a">
<input type="radio" name="q1" value="a" id="q1a"> A. True
</label>
<label for="q1b">
<input type="radio" name="q1" value="b" id="q1b"> B. False
</label>
<h3>2. Second question is either true or false.</h3>
<label for="q1a">
<input type="radio" name="q1" value="a" id="q1a"> A. True
</label>
<label for="q1b">
<input type="radio" name="q1" value="b" id="q1b"> B. False
</label>
<input class="btn btn-primary btn-lg" type="submit" name="submit" value="Submit!" id="submission">
</form>
$('#submission').on('click', function() {
console.log('Submit fires');
submitAnswers();
});
function submitAnswers() {
var total = 2;
var score = 0;
//captures each of the questions answers in a variable
var q1 = document.form['javaScriptQuiz']['q1'].value;
var q2 = document.form['javaScriptQuiz']['q2'].value;
//Validation
for(var i = 1; i <= total; i++ ){
if(eval('q' + i) == null || eval('q' + i) == ''){
alert('You missed a question');
return false;
}
}
// Are the answers to test
var answers = ['b', 'a'];
for(var i = 1; i <= total; i++){
if(eval('q' + 1) == answers[i - 1] ){
console.log('Evaluating answers');
score ++;
}
}
}
最佳答案
尽量不要为提交类型的元素使用名称“submit”,这不是一个好主意。
但我看到的唯一错误是函数 submitAnswers() 中缺少 s 字母:document.form
而不是 document.forms
。我试过你的代码,它适用于最新的 Firefox。
关于javascript - jQuery onClick 事件未触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41255358/