[javascript] 定義したはずの関数が呼び出されない

旅館サイトに予約ページを作ろうとしていて（もちろん依頼されたものなどではないです）、
jspでaタグのonclick属性に指定した関数が呼び出されず,コンソールにエラーメッセージ[TypeError: register is not a function]がでます。

htmlを見ても、javascriptを見ても間違いが見当たりません。試しにテスト用の関数を用意して試してみましたがそちらは呼ばれました。

jsp
1<%@ page language="java" contentType="text/html; charset=UTF-8"
2    pageEncoding="UTF-8"%>
3<!DOCTYPE html>
4<%@ page import="java.util.*" %>
5
6<html>
7<head>
8<meta charset="UTF-8">
9<title>Insert title here</title>
10</head>
11<body>
12<table>
13<tr><th>部屋名</th><th>宿泊料金</th><th>空席状況</th></tr>
14<%
15@SuppressWarnings("unchecked")
16List<Map<String,String>> list = (List<Map<String,String>>) request.getAttribute("list");
17System.out.print("obj:"+request.getAttribute("list"));
18for(Map<String,String> m : list){
19%>
20<tr>
21<td><%=m.get("roomName") %></td>
22<td><%=m.get("price") %></td>
23<td><%if(m.get("isVacant").equals("○")){%>
24<a href="javascript:void(0);" onclick='register(<%=m.get("roomID") %>,"<%=m.get("roomName")%>");'>○</a>
25<%}else{%>
26<%=m.get("isVacant")%>
27<% } %>
28</td>
29<% } %>
30</table>
31<form name="register" action="register_booking_confirm" method="get">
32<input hidden="" name="data" value="">
33<input hidden="" name="roomName" value="">
34</form>
35</body>
36</html>

↓　実際に表示されたページのコード

html
1<html>
2<head>
3<meta charset="UTF-8">
4<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
5<script type="text/javascript" src="js/register_booking.js"></script>
6<!-- 略-->
7</head>
8<body>
9<!--　略 -->
10<table>
11<tbody><tr><th>部屋名</th><th>宿泊料金</th><th>空席状況</th></tr>
12
13<tr>
14<td>桐の間</td>
15<td>13000</td>
16<td>
17<a href="javascript:void(0);" onclick="register(11,&quot;桐の間&quot;);">○</a>
18
19</td>
20
21</tr><tr>
22<td>杜若の間</td>
23<td>13000</td>
24<td>
25<a href="javascript:void(0);" onclick="register(12,&quot;杜若の間&quot;);">○</a>
26
27</td>
28
29</tr><tr>
30<td>洋室シングル</td>
31<td>10000</td>
32<td>
33<a href="javascript:void(0);" onclick="register(21,&quot;洋室シングル&quot;);">○</a>
34
35</td>
36
37</tr></tbody></table>
38<form name="register" action="register_booking_confirm" method="get">
39<input name="data" value="" hidden="">
40<input name="roomName" value="" hidden="">
41</form>
42
43</div>
44
45</body></html>

js
1/**
2 *
3 */
4
5function lookfor(){
6	var arr={
7			visitor : document.getElementById("visitor").value,
8			checkIn : document.getElementById("checkIn").value,
9			checkOut : document.getElementById("checkOut").value,
10	};
11	// Assign handlers immediately after making the request,
12	// and remember the jqxhr object for this request
13	var jqxhr = $.post( "register_booking", arr ,function(data) {
14		document.getElementById("list-area").innerHTML = data;
15	})
16	  .done(function() {
17
18	  })
19	  .fail(function() {
20
21	  })
22	  .always(function() {
23
24	  });
25}
26
27function register(roomId,roomName){
28	var arr={
29			visitor : document.getElementById("visitor").value,
30			checkIn : document.getElementById("checkIn").value,
31			checkOut : document.getElementById("checkOut").value,
32			roomId : roomId,
33			roomName : roomName
34	};
35	var form = documents.register;
36	form.data.value=arr;
37	form.submit();
38}
39function callTest(roomId,roomName){
40	alert("called param:["+roomId+","+roomName+"]");
41}

aタグのonclick属性で呼び出すをcallTestにしたら呼び出されました。

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

回答3件

ベストアンサー

根本的な解決になるかどうかわかりませんが
JavaScriptの読み込み記述をhead内ではなく</body>の直前に持ってきては？

追記：
ブラウザ開発ツールでのエラー確認を行ってください。
おそらくJavaScriptのエラーが出ていると思います。
根本解決にはlistを保管しているJava側のコードが必要に思います。
もしかしたらgetのところで一工夫いれたほうが良いでしょうね。
キーを指定して取得先が文字列であれば、get()ではなくgetString()にするとか型も明示できたらしたほうがトラブル少ないと思います。

蛇足：
個人的にはjQuery記法とPure JavaScript記法が混在しているのはすごく気になります。jQueryを使われるのでしたらjQuery記法に統一されたほうが良いです。
できればクリックなどのイベント処理もHTMLに直接埋め込みではなく$(セレクタ).on('click',function(){})に・・・。

投稿2019/05/13 01:18

編集2019/05/13 01:54

m.ts10806

総合スコア80850

snowshink

2019/05/13 02:19

$(document).on("click",'.roomselect',function(){})で正常に動作しました。ありがとうございます。

m.ts10806

2019/05/13 02:24

根本的解決になってないようには思いますが、（引数渡すところまで言ってないですし）解決につながったようで何よりです。あと、別回答のコメントに書きましたが、サーバーサイドの言語を採用しているのでしたら、何が関係してくるかわからないので「画面側の問題」と決め打ちせずに「言語名」「フレームワーク名」はJSPよりも優先的にタグ付けするようにしてください。場合によりサーバーサイド側のコードの問題かもしれませんし（DBの問題もあるかもしれませんし）

snowshink

2019/05/13 03:11

分かりました。今回の場合はEclipseのtomcat v9.0サーバーを使っています。フレームワークではないです。DBはmariaDBでxamppのMySQLを利用しています。

m.ts10806

2019/05/13 03:14

えっと、最も大事なサーバー側の言語名が抜けています。 Javaサーブレットだとしたら、広義ではフレームワークと言えないこともないですので。(あくまで私の理解ですが)

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

原因は二つ考えられます。
一つは、JSPによるコード変換によって、関数呼び出しがおかしくなっているです。

HTML
1<a href="javascript:void(0);" onclick="register(11,&quot;桐の間&quot;);">○</a>

この実際に吐き出された関数呼び出しの部分にて、
質問者さんが、引数に、エスケープなしの"を入れたいとして、書いたコードが、
JSPによってHTML上の特殊文字としてエスケープされてしまっています。
これによって、関数呼び出しがうまくいってない、のではないでしょうか。
なので、これが原因なら、JSP onclick属性引数文字列　などで検索されるといい方法が見つかるかもしれません。

もう一つ、
JSPのこと詳しく知らなくて恐縮なのですが、もし、JavaScriptフレームワークなのであれば、
関数を記載のJSの読み込みが先に行われておらず、関数が無いと言われている可能性です。
JSPが、サーバーサイドなのであれば、後者のこの問題は発生しなく、関係ないと思われます。

投稿2019/05/13 01:31

miyabi_pudding

総合スコア9528

m.ts10806

2019/05/13 01:35

気づかずスルーしてしまってました・・。ブラウザ開発ツールでのエラー確認が先でしたね。

miyabi_pudding

2019/05/13 01:39

mts10806さん>僕も一見後半の部分見逃してしまい、思わずクリップしてしまいましたｗなんとなーく、JSフレームワークっぽいですよね。JSP。

m.ts10806

2019/05/13 01:42

JSPは一般的にはJavaのサーブレットのView側の仕組みなので、サーブレット自体がフレームワークと言えばフレームワークですね。

kei344

2019/05/13 01:44

JSPは質問タグを見ると説明が有りますよ。 > JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

miyabi_pudding

2019/05/13 01:47 編集

mts10806さん>なんと、Javaでしたか。後学のためにもちょっと調べてみます。 kei344さん>ありがとうございます！そしたら、回答の後者の原因は関係なさそうですね。タグチェックで見れるんですね！ほんとこのサイト使いこなせてない自分ｗ

m.ts10806

2019/05/13 01:53

サーバーサイドの言語を採用しているのでしたら、何が関係してくるかわからないので「画面側の問題」と決め打ちせずに「言語名」「フレームワーク名」はJSPよりも優先的にタグ付けしておいてもらいたいですね。 PHPでいうと「Smarty」とか「Blade」だけついてるのと同じ感じになってます。

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

jpsの動作は分からないけれどjsの読み込み順の違いとかはあるよ
吐き出されたhtmlは正しいし吐き出されたhtmlを直接書くと動くのに、フレームワーク通して表示するとやっぱり動かない・・・みたいな
全てにdeferをつけてみるとか、テンプレートに直接<script></script>を書くとか、ひとつひとつ出来る事試して頑張ってください

投稿2019/05/13 01:30