質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.10%

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

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 718

snowshink

score 82

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

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

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@ page import="java.util.*" %>

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table>
<tr><th>部屋名</th><th>宿泊料金</th><th>空席状況</th></tr>
<%
@SuppressWarnings("unchecked")
List<Map<String,String>> list = (List<Map<String,String>>) request.getAttribute("list");
System.out.print("obj:"+request.getAttribute("list"));
for(Map<String,String> m : list){
%>
<tr>
<td><%=m.get("roomName") %></td>
<td><%=m.get("price") %></td>
<td><%if(m.get("isVacant").equals("○")){%>
<a href="javascript:void(0);" onclick='register(<%=m.get("roomID") %>,"<%=m.get("roomName")%>");'></a>
<%}else{%>
<%=m.get("isVacant")%>
<% } %>
</td>
<% } %>
</table>
<form name="register" action="register_booking_confirm" method="get">
<input hidden="" name="data" value="">
<input hidden="" name="roomName" value="">
</form>
</body>
</html>


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

<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/register_booking.js"></script>
<!-- 略-->
</head>
<body>
<!-- 略 -->
<table>
<tbody><tr><th>部屋名</th><th>宿泊料金</th><th>空席状況</th></tr>

<tr>
<td>桐の間</td>
<td>13000</td>
<td>
<a href="javascript:void(0);" onclick="register(11,&quot;桐の間&quot;);"></a>

</td>

</tr><tr>
<td>杜若の間</td>
<td>13000</td>
<td>
<a href="javascript:void(0);" onclick="register(12,&quot;杜若の間&quot;);"></a>

</td>

</tr><tr>
<td>洋室シングル</td>
<td>10000</td>
<td>
<a href="javascript:void(0);" onclick="register(21,&quot;洋室シングル&quot;);"></a>

</td>

</tr></tbody></table>
<form name="register" action="register_booking_confirm" method="get">
<input name="data" value="" hidden="">
<input name="roomName" value="" hidden="">
</form>

</div>

</body></html>
/**
 *
 */

function lookfor(){
    var arr={
            visitor : document.getElementById("visitor").value,
            checkIn : document.getElementById("checkIn").value,
            checkOut : document.getElementById("checkOut").value,
    };
    // Assign handlers immediately after making the request,
    // and remember the jqxhr object for this request
    var jqxhr = $.post( "register_booking", arr ,function(data) {
        document.getElementById("list-area").innerHTML = data;
    })
      .done(function() {

      })
      .fail(function() {

      })
      .always(function() {

      });
}

function register(roomId,roomName){
    var arr={
            visitor : document.getElementById("visitor").value,
            checkIn : document.getElementById("checkIn").value,
            checkOut : document.getElementById("checkOut").value,
            roomId : roomId,
            roomName : roomName
    };
    var form = documents.register;
    form.data.value=arr;
    form.submit();
}
function callTest(roomId,roomName){
    alert("called param:["+roomId+","+roomName+"]");
}


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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+2

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

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


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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/13 11:19

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

    キャンセル

  • 2019/05/13 11:24

    根本的解決になってないようには思いますが、(引数渡すところまで言ってないですし)
    解決につながったようで何よりです。

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

    キャンセル

  • 2019/05/13 12:11

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

    キャンセル

  • 2019/05/13 12:14

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

    キャンセル

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

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

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


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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/13 10:44

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

    キャンセル

  • 2019/05/13 10:45 編集

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

    キャンセル

  • 2019/05/13 10:53

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.10%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る