jspからjsファイルが呼び出せません

〇やりたいこと
jspファイルからonclickを用いて、jsファイルを起動・実行したい

〇困っていること
クリックしてもjsファイルが実行されない。
最初は実行されていたが、それは同一ネームの別jsファイルが実行されていたので、本当に実行してほしいjsファイルの名前を変更しました。（Check.js →　Check_Change.js）

以下コードです。

jsp
1<%@ page language="java" contentType="text/html; charset=UTF-8"
2    pageEncoding="UTF-8"%>
3<!DOCTYPE html>
4<html>
5<head>
6<meta charset="UTF-8">
7<title>Change_task</title>
8<link rel="stylesheet" href="CSS/Change.css">
9<SCRIPT type="text/javascript" src="js/Check_Change.js"></SCRIPT>
10</head>
11<body>
12<H1>アンケートフォーム</H1>
13
14        <P>以下のアンケートフォームを入力して送信ボタンを押下してください</P>
15        <FORM method="POST" name="question_form" id="form" >
16            <Input type="hidden" name="hiddenNO" value=2>
17
18　　　　～中略～
19
20            <DIV class="send_div">
21                <INPUT type="button" class="send_button" value="変更" onClick="Javascript:Check_Change();">
22            </DIV>
23        </FORM>
24        <FORM>
25            <DIV>
26                <INPUT type="button" class="reset" value="リセット" onClick="location.reload();">
27            </DIV>
28        </FORM>
29</body>
30</html>

javascript
1//メインメソッド
2function Check_Change(){
3    var count = 0;
4    //郵便番号のメソッド実行
5    if(PostNum() === false){
6        alert("郵便番号ははじめ3文字、次に4文字分です------。");
7    }else{
8        count++;
9    }
10
11~省略~
12
13//全てのチェックを通ってきたらメーラー起動
14    if(count == 9){
15        location.href="http://localhost:8081/Change/ChangeServlet";
16    }
17}

一応関係があるかもと思うので、wev.xmlも載せます。

web.xml
1<?xml version="1.0" encoding="UTF-8"?>
2<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
3  <display-name>Change</display-name>
4  <welcome-file-list>
5    <welcome-file>index.html</welcome-file>
6    <welcome-file>index.htm</welcome-file>
7    <welcome-file>index.jsp</welcome-file>
8    <welcome-file>default.html</welcome-file>
9    <welcome-file>default.htm</welcome-file>
10    <welcome-file>default.jsp</welcome-file>
11  </welcome-file-list>
12  <servlet>
13    <description></description>
14    <display-name>ChangeServlet</display-name>
15    <servlet-name>ChangeServlet</servlet-name>
16    <servlet-class>Change.ChangeServlet</servlet-class>
17  </servlet>
18  <servlet-mapping>
19    <servlet-name>ChangeServlet</servlet-name>
20    <url-pattern>/ChangeServlet</url-pattern>
21  </servlet-mapping>
22</web-app>

jsファイルが入っているjsフォルダはjspファイルと同じ階層にあるので、srcはあっているはずです。

〇自分で試してみて疑問だったこと
jsファイル単体で起動させるとコンパイルエラーが起こります。6行目の61文字目に「終了していない文字列型の定数です」というエラーです。
しかしjsファイルの6行目には61文字もなく、また他のプロジェクトでは正常に動いたファイルをそのまま流用しているので、内部でのエラーはないのではと考えています。

アドバイスをお願いします。

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

回答1件

ベストアンサー

動作に問題がないと思う場合は以下の点をチェックしてください。

ブラウザの開発者モード(F12キーで起動)にて対象のJavaScriptファイルが読み込まれているかを確認してください。
サーブレット経由でJSPを表示しているときは相対パスの関係がずれてしまうことが往々にしてあります。

JSPでコンテキストパスを指定していないことによる不具合（実装ミス）はよくある話です。

テラテイル内でも類似する質問や回答がたくさんありますので、参考にされると良いでしょう。
https://teratail.com/search?q=JSP+%E3%82%B3%E3%83%B3%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%83%91%E3%82%B9

投稿2020/09/14 09:17

A-pZ

総合スコア12011

Y.Mamoru

2020/09/15 00:49

リンクまでありがとうございます。デベロッパーツールで確認したところjavascriptファイルを読み込めていませんでした。しかし同じ階層にあるCSSファイルは読み込めて、同様のパスを通しているjavascriptファイルが読み込めない理由がわかりません。これから貼って頂いたリンク先を見ていきますが、もしわかることがあれば教えていただけたらありがたいです。

Y.Mamoru

2020/09/15 01:03

リンク先を読ませていただいて、移動した先のファイルからのパスに変わってしまうから、記述内容とずれが出てきて読み込めなくなる。その対策として、ずれを生まないようにコンテキストパスを使う。という認識をしたのですが、あってますでしょうか。(^^; またjspファイルの<script>タグの中を以下のように変えたのですが、やはり読み込まれませんでした。もしわかることがあればよろしくお願いします。 <SCRIPT type="text/javascript" src="${pageContext.request.contextPath}/js/Check_Change.js"></SCRIPT>

A-pZ

2020/09/15 03:41

読み込まれないと判断されたのは、404(NOT FOUND)が出ている、で間違いないでしょうか？ JavaScriptの宣言で src="${pageContext.request.contextPath}/js/Check_Change.js" になっていますので、WebContent 以下に jsフォルダがあり、その中に Check_Change.js があるでしょうか。また、開発者モードで開いたとき、対象のJavaScript読み込む際のURLで、${pageContext.request.contextPath} と指定した箇所は、コンテキストパス（Webアプリケーションの名前になります）に自動変換されていますでしょうか？

Y.Mamoru

2020/09/15 04:10

いえ、読み込まれないと判断したのは404が出ているわけではなくデベロッパーツールのSorceを開いたときに、左側のツリーにjsフォルダが表示されていないからです。同じ階層にあるcssフォルダや、jspフォルダは表示されています。開発者モードで開いたときのURLとは、デベロッパーツールでのElementsを見た時であっていますでしょうか？確かにコンテキストパス（~/~/Check_Change.jsという位置を表す表記）に変わっています。

A-pZ

2020/09/15 06:29

WebContent の構造が以下になっていますか？ WebContent - js - css - jsp

Y.Mamoru

2020/09/15 07:25

はい。そのとおりです！

A-pZ

2020/09/15 08:18

再度同じ内容の確認になってしまうかも知れませんが、開発者ツールにて、/コンテキストパス/js/Check_Change.js のリクエストが飛んでいるのであれば、Networkタブにて何らかのレスポンス（ないしは404）が表示されているはずですが、そちらは確認されましたでしょうか。

Y.Mamoru

2020/09/15 09:05

NetWorkを確認すると以下のエラー文を見つけました。 Uncaught ReferenceError: Check_Change is not defined at HTMLInputElement.onclick (Change_Update.jsp:138) そして138行目は以下になります。 <DIV class="send_div">//138 <INPUT type="button" class="send_button" value="変更" onClick="Javascript:Check_Change();">//139 </DIV>//140 この部分の書き方の問題でしょうか。

A-pZ

2020/09/15 09:14

JavaScriptの関数：Check_Change()を呼び出そうとして未定義であると返されています。ふたたび同じ内容になるかもしれませんが、JavaScriptのインポートで /コンテキストパス/js/Check_Change.js を指定されているのですから、開発者ツールにて、/コンテキストパス/js/Check_Change.js のリクエストが飛んでいるはずです。Networkタブで再確認をしてください。ここに現れないのであれば記述ミスがあるか、JSPにて記述エラーがあるため再読み込みがされておらず更新されていないなどが考えられます。

Y.Mamoru

2020/09/15 09:41

再度確認したところ以下のエラー文は見つかりました。 Uncaught SyntaxError: Illegal break statement そして今改めて更新を押すとなぜか、開発者ツールのELEMENTSにはjsフォルダが表示されました！何が原因なのかは未だわかっていません。かつ実行されない状態です。

A-pZ

2020/09/15 12:25

Tomcat内に展開されているファイルやディレクトリの状態が正しく反映されずに動いていることもありますので、動作が安定していない場合やコンパイルエラーがある場合は、一度Tomcatを停止→再起動するか、Eclipseから実行されている場合は、プロジェクトのクリーンやTomcatワークスペースのクリーンなどを行うとリフレッシュされますのでお試しください。

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