JavaScript 事件侦听器测验

JavaScript event listener quiz

本文关键字：侦听器 事件 JavaScript      更新时间：2023-09-26

我对Javascript相当陌生，到目前为止，我主要通过codecademy.com的JavaScript课程工作，这门课程很棒，但只专注于编写JavaScript代码，而不是将其用于Web开发目的(即将其与HTML和CSS捆绑在一起(。

我最近从 Udemy.com 那里得到了一门 JavaScript 课程，该课程确实专注于使用 JavaScript 进行 Web 开发，到目前为止也很棒，但讲师所做的一些小事情我知道不再被认为是最佳实践(该课程可能有点过时(。

最主要的是他使用的是 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. &lt;js&gt;<br>
                    <input type = "radio" name = "q1" value = "b" id = "q1b">b. &lt;script&gt;<br>
                    <input type = "radio" name = "q1" value = "c" id = "q1c">c. &lt;body&gt;<br>
                    <input type = "radio" name = "q1" value = "c" id = "q1d">d. &lt;link&gt;<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 &copy; 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 变量为空。您需要将脚本引用移动到文件的底部。您还应该将事件作为参数添加到函数中，并尽早调用 event.preventDefault((，这样如果由于某种原因未达到返回 false，您的表单就不会无意中提交。最后，您没有正确读取单选按钮检查状态，但是由于您正在学习，我将留给您弄清楚。

由于您正在使用addEventListener通过preventDefault方法阻止表单提交：

function submitAnswers(e) {
    e.preventDefault();
    // rest of the code ...
}

在以前的版本中，当您使用内联事件注册onsubmit="return submitAnswers()"您可以使用简单的return false来执行相同的操作。

演示：http://jsfiddle.net/7xggt9ky/

相关文章：