キャッチされないTypeError：ヌルのプロパティ 'addEventListener'を読み取ることができませんか？

Question

htmlドキュメントでは、 "id"は "myForm"です。 main.jsファイルが一番下にリンクされています。 何が間違っていますか？

私は答えを探してきたが、私

1. が
2. のjsファイルはDOM

 

<div class="container"> 
    <div class="header clearfix"> 
    <nav> 
    </nav> 
    <h3 class="text-muted">Bookmarker</h3> 
    </div> 

    <div class="jumbotron"> 
    <h2>Bookmark Your Favorite sites</h2> 
    <form id="myform"> 
     <div class="form-group"> 
      <label>Site Name</label> 
      <input type="text" class="form-control" id="siteName" placeholder="Website Name"> 
     </div> 
     <div class="form-group"> 
      <label>Site Url</label> 
      <input type="text" class="form-control" id="siteUrl" placeholder="Website URL"> 
     </div> 
     <button type="submit" class="btn btn-primary">Submit</button> 
    </form> 
    </div> 

    <div class="row marketing"> 
    <div class="col-lg-12"> 
     <div id="bookmarksResults"></div> 
    </div> 

    </div> 

    <footer class="footer"> 
    <p>&copy; 2017 Bookmarker, Inc.</p> 
    </footer> 

</div> <!-- /container --> 
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
<script src="js/main.js"></script> 

後にロードされたHTMLファイルにIDを持っているようです

// Listen for formsubmit 

    document.getElementById('myForm').addEventListener('submit', saveBookmark); 

    function saveBookmark(){ 
     console.log('It Works'); 
    } 

Answer 1

変更この行：この行に

document.getElementById('myForm').addEventListener('submit', saveBookmark); 

：

document.getElementById('myform').addEventListener('submit', saveBookmark); 

その "あるmyForm" ではない "あるmyForm"

乾杯、