Question

我正在尝试收听表单的提交事件。我已经精确地包含了我的js文件，并且还正确地编写了我的表单元素。它一直在保持健康

Uncaught TypeError: Cannot read property 'addEventListener' of null

我的HTML文件

/*Form Listener*/
var form = document.getElementById('myForm');
form.addEventListener('submit', saveBookmark);

function saveBookmark(e){
	e.preventDefault();
	console.log('Form Submitted');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>Bookmark App | Home</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
</head>
<body>
    <div class="container">
        <header>
            <h2 class="text-center">Bookmark App</h2>
            <hr>
        </header>
        <section>
            <div class="jumbotron">
                <div class="text-center">
                    <h3>Bookmark Your Favorite Sites</h3> <br>
                    <form id="myForm">
                        <div class="form-group">
                            <label>Website Name</label>
                            <input type="text" class="form-control" placeholder="Enter Website Name" id="siteName">
                        </div>
                        <div class="form-group">
                            <label>Website URL</label>
                            <input type="text" class="form-control" placeholder="Enter Website URL" id="siteUrl">
                        </div>
                        <button class="btn btn-lg btn-primary" type="submit">
                            Submit
                        </button>
                    </form>
                </div>
            </div>
        </section>
    </div>
</body>
</html>

我的JS文件

任何帮助都会被认定

Answer 1

HTML（和JavaScript）从上到下运行。

假设您加载的JavaScript在main.js中，则在加载包含元素myForm的html之前加载并处理它。

相反，您需要将对main.js的引用移至HTML底部（</form>结束标记下方的某处）。

在javascript

1 个答案: