Uncaught TypeError: Kann Eigenschaft 'addEventListener' von null nicht lesen?

Question

Im HTML-Dokument ist "id" "myForm". Die Datei main.js ist unten verlinkt. Was mache ich falsch?

Ich habe Suche nach einer Antwort, aber es scheint, dass ich

1. haben eine ID in der HTML-Datei
2. js Datei nach 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> 

geladen wird

// Listen for formsubmit 

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

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

Answer 1

Änderung dieser Zeile:

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

Zu dieser Zeile:

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

seine "myform" nicht "myForm"

Cheers,