我对 Javascript 相当陌生，到目前为止，我主要学习了 codecademy.com 的 JavaScript 类(class)，该类(class)很棒，但只专注于编写 JavaScript 代码，而不是将其用于 Web 开发目的(即将其绑定(bind)) HTML 和 CSS)。
我最近从 Udemy.com 获得了一门 JavaScript 类(class)，该类(class)专注于使用 JavaScript 进行 Web 开发，到目前为止这也很棒，但讲师所做的一些小事情我知道这些不再被认为是最佳实践(该类(class)可能有点过时)。
最主要的是他使用 HTML 事件处理程序属性而不是使用事件监听器。我正在尝试修改示例中的代码以使用事件监听器，但到目前为止我还没有成功。我希望有人能够让苦苦挣扎的新手了解我做错了什么。
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Simple JavaScript Quiz</title>
<link rel ="stylesheet" href="css/style.css">
<script type = "text/javascript" src="js/script.js"></script>
</head>
<body>
<div id = "container">
<header>
<h1> Simple Javascript Quiz </h1>
<p> Test your knowledge in <strong>JavaScript fundamentals.</strong> </p>
</header>
<section>
<div id = "results"></div>
<form name = "quizForm" id = "qForm">
<h3>1. In which HTML element do we put in JavaScript code?</h3>
<input type = "radio" name = "q1" value = "a" id = "q1a">a. <js><br>
<input type = "radio" name = "q1" value = "b" id = "q1b">b. <script><br>
<input type = "radio" name = "q1" value = "c" id = "q1c">c. <body><br>
<input type = "radio" name = "q1" value = "c" id = "q1d">d. <link><br>
<h3>2. Which HTML attribute is used to reference an external JavaScript file?</h3>
<input type="radio" name="q2" value="a" id="q2a">a. src<br>
<input type="radio" name="q2" value="b" id="q2b">b. rel<br>
<input type="radio" name="q2" value="c" id="q2c">c. type<br>
<input type="radio" name="q2" value="d" id="q2d">d. href<br>
<h3>3. How would you write "Hello" in an alert box?</h3>
<input type="radio" name="q3" value="a" id="q3a">a. msg("Hello");<br>
<input type="radio" name="q3" value="b" id="q3b">b. alertBox("Hello");<br>
<input type="radio" name="q3" value="c" id="q3c">c. document.write("Hello");<br>
<input type="radio" name="q3" value="d" id="q3d">d. alert("Hello");<br>
<h3>4. JavaScript is directly related to the "Java" programming language</h3>
<input type="radio" name="q4" value="a" id="q4a">a. True<br>
<input type="radio" name="q4" value="b" id="q4b">b. False<br>
<h3>5. A variable in JavaScript must start with which special character</h3>
<input type="radio" name="q5" value="a" id="q5a">a. @<br>
<input type="radio" name="q5" value="b" id="q5b">b. $<br>
<input type="radio" name="q5" value="c" id="q5c">c. #<br>
<input type="radio" name="q5" value="d" id="q5d">d. No Special Character<br>
<br><br>
<input type = "submit" value ="Submit Answers">
</form>
</section>
<footer>
<p>Copyright © 2014, All Rights Reserved</p>
</footer>
</div>
</body>
</html>
JavaScript:
function submitAnswers() {
var total = 5;
var score = 0;
//get user input
var q1 = document.forms["quizForm"]["q1"].value;
var q2 = document.forms["quizForm"]["q2"].value;
var q3 = document.forms["quizForm"]["q3"].value;
var q4 = document.forms["quizForm"]["q4"].value;
var q5 = document.forms["quizForm"]["q5"].value;
var qArray = [q1, q2, q3, q4, q5];
//reminds user to select each button if left unselected
for (var i = 0; i < qArray.length; i++) {
if (qArray[i] === null || qArray[i] === "") {
alert("You forgot to fill out question " + [i + 1]);
return false;
}
}
//set correct answers
var answers =["b", "a", "d", "b", "d"];
//check answers
for (var i = 0; i < qArray.length; i++) {
if (qArray[i] === answers[i]) {
score++;
}
}
//display results
var results = document.getElementById('results');
results.innerHTML = '<h3>You scored <span>' + score + '</span> out of <span>' + total + '</span></h3>';
return false;
};
var qForm = document.getElementById('qForm');
qForm.addEventListener('submit', submitAnswers, false);
该项目是一个简单的 HTML 测验，由 5 个多项选择题组成。
单击提交按钮时，代码应计算分数并将结果写入空 <div>页面顶部的元素。如果未选中的单选按钮留下任何问题，则会弹出一个警报窗口，让用户知道。
当我使用 HTML 事件处理程序属性时，代码运行良好，但是当我删除 HTML 事件处理程序并使用事件列表器时，我似乎无法运行代码。
最佳答案
这里的具体问题是，您的脚本在 head 元素中被引用，因此它在 DOM 构建之前开始执行，并且您的 qForm 变量为 null。 您需要将脚本引用移至文件底部。您还应该将事件作为参数添加到您的函数中，并尽早调用 event.preventDefault() ，这样如果由于某种原因未达到 return false ，您的表单就不会意外提交。 最后，您没有正确读取单选按钮检查状态，但既然您正在学习，我将把它留给您来计算。
关于JavaScript 事件监听器测验，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27336182/