未捕获的类型错误：无法读取 null 的属性“addEventListener”？

Question

In the html document "id" is "myForm". main.js file is linked in the bottom. What am i doing wrong?

I have been searching for an answer but it seems that i

1. have an id in the html file
2. js file is loaded after 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>

    // Listen for formsubmit

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

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

Answer 1

change this line :

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

To this line :

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

its "myform" not "myForm"

Cheers,