htmlからjavascriptファイルを読み込みたい

html
1<!DOCTYPE html>
2<html lang="ja">
3
4  <head>
5    <meta charset="UTF-8">
6    <title>sample</title>
7    <script type="text/javascript" src="test.js"></script>
8  </head>
9
10  <body>
11   <button id="startbtn">start</button>
12  </body>
13</html>

javascript
1var button=document.getElementById("startbtn");
2button.addEventListener("click",function(e){
3    e.preventDefault();
4
5button.innerHTML="ok"
6});

htmlのファイルを開いたときにtest.jsという名前のjavascriptファイルを
読み込みたいのですが、読み込めません。
どこを修正すればよいか教えてください。

okina

2020/05/12 11:31

htmlとtest.jsの階層は同じですか？

popipi_1

2020/05/12 11:33

同じフォルダに入っています。

kei344

2020/05/12 12:49

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

行動規範の内容に同意します

回答3件

イベント付与する際には対象の要素が読み込まれている必要があります。

</body>の前にJavaScriptを置くのが定石でしたが、 [DOMContentLoaded イベント](https://developer.mozilla.org/ja/docs/Web/API/Window/DOMContentLoaded_event)を利用すれば、置く場所は問いません。

投稿2020/05/12 12:26

m.ts10806

総合スコア80854

popipi_1

2020/05/12 13:01

こちらの方法も試してみます。ありがとうございました。

行動規範の内容に同意します

ベストアンサー

をbodyの最後においてみてください。</body>の直前です。

投稿2020/05/12 11:36

okina

総合スコア471

popipi_1

2020/05/12 11:52

早速</body>の直前に置いてみたところ、正しく動きました！ありがとうございます！

行動規範の内容に同意します

試したところ、test.jsは正常に読み込まれていて「buttion==null」になっていることによるエラーが発生しているようです。
そのため、<script>タグを<button>タグより後に持ってくるか、
以下のようにLoad後に取得する必要があるのではないかと思われます。
JavaScriptはずぶの素人なので間違ってるかもしれません。

javascript
1window.onload=function(){
2	var button=document.getElementById("startbtn");
3	button.addEventListener("click",function(e){
4	    e.preventDefault();
5		button.innerHTML="ok"
6	});
7}