Javascript 无法读取EventListener属性_Javascript_Jquery_Twitter Bootstrap_Dynamic

Javascript 无法读取EventListener属性

javascript jquery twitter-bootstrap dynamic

Javascript 无法读取EventListener属性,javascript,jquery,twitter-bootstrap,dynamic,Javascript,Jquery,Twitter Bootstrap,Dynamic,我从网上得到了一个JavaScript文件和一个引导表单。在页面上有两个输入，当您填写它们时，它会将数字相加，并将新数字输出当我尝试它没有做任何事，在控制台我得到了2个错误。第一个是引导JavaScript需要jQuery，所以我添加了它，第二个是“uncaughttypeerror:cannotreadproperty'addEventListener'of null”，我不明白为什么会出现这个错误表格编号为： <!DOCTYPE html> <html>

我从网上得到了一个JavaScript文件和一个引导表单。在页面上有两个输入，当您填写它们时，它会将数字相加，并将新数字输出

当我尝试它没有做任何事，在控制台我得到了2个错误。第一个是引导JavaScript需要jQuery，所以我添加了它，第二个是“uncaughttypeerror:cannotreadproperty'addEventListener'of 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>

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

请在之前添加此内容，因为您的“test.js”文件是在加载DOM元素之前加载的。

这是因为您先加载javascript文件，然后再创建DOM元素。因此，当您加载js时，它将查找包含first和second的元素，而这两个元素当时并不存在

var first=document.getElementById（'first'）；
var second=document.getElementById（'second'）；
var result=document.getElementById（'result'）；
第一，加法器列表器（“输入”，总和）；
第二，addEventListener（“输入”，总和）；
函数和（）{
var one=parseFloat（first.value）| 0；
var two=parseFloat（second.value）| 0；
var add=1+2；
result.innerHTML=“您的总数是：”+add；
}


考试题目

您正在加载DOM之前运行JS代码。将逻辑放在加载处理程序中，或者将引用它的

标记放在

前面。还要注意，引导需要jQuery.js，您的页面在此之前不包含jQuery.js，因为“test.js”文件是在加载DOM元素之前加载的。

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;

}