Fatal编程技术网

JavaScript事件侦听器测验

javascript

JavaScript事件侦听器测验,javascript,event-handling,addeventlistener,Javascript,Event Handling,Addeventlistener,我对Javascript相当陌生，直到目前为止，我主要学习codecademy.com的Javascript课程，这门课程很不错，但只专注于编写Javascript代码，而不是将其用于web开发目的（即将其与HTML和CSS结合） 我最近在Udemy.com上学习了一门JavaScript课程，该课程的重点是使用JavaScript进行web开发，到目前为止，这门课程也很不错，但我知道讲师所做的一些小事情不再被视为最佳实践（课程可能有点过时） 主要的一点是，他使用的是HTML事件处理程序属性，而

我对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测试
简单Javascript测试
测试您的JavaScript基础知识。

1.我们在JavaScript代码中放入哪个HTML元素？
A.js

B脚本

C正文

D链接

2.哪个HTML属性用于引用外部JavaScript文件？
A.src

Brel

C类型

Dhref

3.你会如何在提醒框中写“你好”？
A.msg（“你好”）

BalertBox（“你好”）

C写下“你好”

D警惕（“你好”）

4.JavaScript与“Java”编程语言直接相关
A.正确

B假

5.JavaScript中的变量必须以哪个特殊字符开头
a@

b$

c#

D无特殊字符




版权及副本；2014，保留所有权利
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);

函数submitAnswers（）{
var总计=5；
var得分=0；
//获取用户输入
var q1=document.forms[“quizForm”][“q1”]值；
var q2=document.forms[“quizForm”][“q2”]值；
var q3=document.forms[“quizForm”][“q3”]值；
var q4=document.forms[“quizForm”][“q4”]值；
var q5=document.forms[“quizForm”][“q5”].value；
var qArray=[q1、q2、q3、q4、q5]；
//提醒用户在未选中时选择每个按钮
对于（变量i=0；i
该项目是一个简单的HTML测验，由5个选择题组成

单击提交按钮时，代码应计算分数并将结果写入页面顶部的空
元素。如果未选中单选按钮留下任何问题，则应弹出一个警报窗口，让用户知道

当我使用HTML事件处理程序属性时，代码运行正常，但当我删除HTML事件处理程序并使用事件列表器时，我似乎无法运行代码。

因为您使用的是
addEventListener
使用
preventDefault
方法阻止表单提交：

function submitAnswers(e) {
    e.preventDefault();
    // rest of the code ...
}
在以前的版本中，当您使用内联事件注册时，可以使用simple
return false
执行相同的操作

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

Ahhh，非常感谢！我花了一个上午的时间想弄明白，就是这样！感谢您指出单选按钮检查状态错误。我去看看。我感谢你的帮助！