Question

我对Javascript还不熟悉，到目前为止，主要是通过codecademy.com的JavaScript课程来完成这一过程，该课程非常出色但仅侧重于编写JavaScript代码而不是用于Web开发目的（即用HTML和CSS绑定）。

我最近从Udemy.com获得了一门JavaScript课程，该课程专注于为网络开发使用JavaScript，到目前为止，这也是很棒的但是教师所做的一些小事情我认为不再是最佳实践了（该课程可能有点过时了。

主要的是他使用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事件处理程序并使用事件列表时，我似乎无法运行代码。

Answer 1

这里的具体问题是你的脚本在head元素中被引用，所以它在构建DOM之前开始执行，你的qForm变量为null。您需要将脚本引用移动到文件的底部。您还应该将一个事件作为参数添加到您的函数中，并在早期调用event.preventDefault（），这样如果由于某种原因未达到返回false，则表单不会无意中提交。最后，你没有正确地阅读单选按钮检查状态，但是因为你正在学习，我会把它留给你来计算。

Answer 2

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

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

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

JavaScript事件监听器测验

2 个答案:

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