HTMLが外部のJSファイルを読み込んでくれません

前提・実現したいこと

HTMLに外部ファイルのJSを記載したのですが、
読み込んでくれません。
おそらくpathが間違ってると思うのですが、、、、

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja" xmlns:th="http://www.thymeleaf.org"
3	xmlns:sec="http://www.thymeleaf.org/extras/spring-security4">
4<head>
5<script type="text/javascript" src="userEdit.js"></script>
6<meta charset="UTF-8">
7</head>
8<body onload="proc();">
9  <div id="output"></div>
10	<div th:replace="common/globalnavi::globalnavi"></div>
11===以下略===

javascript
1
2window.onload = onLoad;
3
4function onLoad() {
5	  target = document.getElementById("output");
6	  target.innerHTML = "JavaScriptが実行されました。";
7	}

croleで出るエラーメッセージ
1GET http://localhost:8080/userEdit.js net::ERR_ABORTED 404

HTMLとjsは同じ階層に配置しています。
HTMLにjs処理をベタ書きすると動くのですが、外部ファイルにすると動作しません。

x_x

2018/11/30 02:22

templatesフォルダが見えるので、直接HTMLファイルを見ているわけではないと思います。何らかのフレームワーク(Spring Boot?)を使っているなら、それが何か書いておきましょう。

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

回答4件

情報が少ないですが、質問のようなケースでは、以下の点を確認してみてください。

JavaScriptファイルが読み込めているかを確かめる
ブラウザのコンソールにNOT FOUNDのエラーが出ていませんか？

JavaScriptが正常に処理されているかを確かめる
JSファイルを読み込めているが、エラーで処理がとまっている可能性があります。
ブラウザのコンソールに何かエラーが出力されていませんか？

JavaScriptの処理が、実行されない形で記述されていないかを確かめる
上記の項目でエラーがない場合に、例えばconsole.log('Hello');とだけ書いたファイルを読み込んでみて正常に処理されるのであれば、当該のJavaScriptファイルの内容が実行される前にwindow.onloadが条件を満たして呼び出されてしまっているなどが考えられます。

投稿2018/11/27 13:56

編集2018/11/27 14:02

NozomuIkuta

総合スコア1260

takahiro00

2018/11/30 02:09

net::ERR_ABORTED 404のエラーが出力されます。おそらくjsファイルがうまく読み込めていないと思うのですが、 pathも階層もあってるはずなのですが

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

window.onload =と<body onload="">は併用できません。

後から書いた方のみが実行されますので、この場合<body onload="proc();">の方だけ実行されています。

window.onload =をbodyタグの中に入れた場合は
window.onload =の方が実行され、<body onload="proc();">の方は実行されなくなります。

上書きされてしまうような状態と考えて良いと思います。

window.onload = を複数書いた場合も、後から書いた方のみ実行されます。

※ MacOS Chrome にて検証

投稿2018/11/27 16:06

編集2018/11/27 16:42

colling

総合スコア798

takahiro00

2018/11/30 02:06

返信ありがとうございます。上記試してみたのですが、うまくいかず。。。ちなみにjs処理をベタ書きするとうまくいくのですが

colling

2018/11/30 02:17

どのように試してみましたか？

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

自己解決

自己解決しました。
thymeleafを使ってたので呼び出し方法を以下のように書かないと外部ファイルを呼び出せないようでした。

投稿2018/11/30 02:16

takahiro00

総合スコア84

これで大丈夫ですが、解決したようですね

js
1window.addEventListener('DOMContentLoaded', function() {
2  onLoad();
3})
4function onLoad() {
5  target = document.getElementById("output");
6  target.innerHTML = "JavaScriptが実行されました。";
7}
8function proc() {
9  console.log('aaa');
10}