Question

我从互联网上获得了一个JavaScript文件和一个引导程序表单。在页面上有2个输入，当你填写它们时，它会将数字加在一起并输出新的数字。

当我尝试它时它没有做任何事情，在控制台中我遇到了2个错误。第一个是bootstraps JavaScript需要jQuery所以我添加了，第二个说“Uncaught TypeError：无法读取属性'addEventListener'的null”，我无法弄清楚为什么我得到这个错误。

表单代码为：

<!DOCTYPE html>
<html>
    <head>

    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="test.js"></script>


        <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <script
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    </head>

    <body>
    <div class="container text-center">

      <h1>
        test title
      </h1>

    <form action="#" class="form-inline">

      <input type="text" id="first"class="form-control" placeholder="Enter your first number">
        <input type="text" id="second" class="form-control" placeholder="Enter your second number">

    </form>

      <h2 id="result"></h2>

    </div>
    </body>
</html>

JavaScript代码是：

var first = document.getElementById('first');
var second = document.getElementById('second');
var result = document.getElementById('result');

first.addEventListener("input", sum);
second.addEventListener("input", sum);

function sum() {

    var one = parseFloat(first.value) || 0;
    var two = parseFloat(second.value) || 0;

    var add = one+two;

    result.innerHTML = "Your Sum is : " + add;

}

那么也许有人可以解释我在这里搞砸了什么？

Answer 1

之前添加此内容，因为您的＆＃39; test.js＆＃39;在加载DOM元素之前加载文件。

Answer 2

这是因为你首先加载了javascript文件，而不是创建了Dom元素。所以当你加载js时，它会查找第一个和第二个元素，当时不存在。

＆＃13;

var first = document.getElementById('first');
var second = document.getElementById('second');
var result = document.getElementById('result');

first.addEventListener("input", sum);
second.addEventListener("input", sum);

function sum() {

    var one = parseFloat(first.value) || 0;
    var two = parseFloat(second.value) || 0;

    var add = one+two;

    result.innerHTML = "Your Sum is : " + add;

}

＆＃13;

<!DOCTYPE html>
<html>
    <head>

    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="test.js"></script>


        <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <script
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    </head>

    <body>
    <div class="container text-center">

      <h1>
        test title
      </h1>

    <form action="#" class="form-inline">

      <input type="text" id="first"class="form-control" placeholder="Enter your first number">
        <input type="text" id="second" class="form-control" placeholder="Enter your second number">

    </form>

      <h2 id="result"></h2>

    </div>
    </body>
</html>

＆＃13;

阅读以下内容：以下是当浏览器加载带有标记的网站时会发生什么：

获取HTML页面（例如index.html）开始解析HTML 解析器遇到引用外部脚本文件的标记。浏览器请求脚本文件。同时，解析器阻止并停止解析页面上的其他HTML。一段时间后，脚本被下载并随后执行。解析器继续解析HTML文档的其余部分。

访问以查看完整说明： Where should I put <script> tags in HTML markup?

无法读取EventListener属性

2 个答案: