Q&A
PHP関係ないのでは。 ＜ タイトル
前提・実現したいこと
一つのPHPの文にscriptを追加して動かすとうまく動くのですが，javascriptを外部ファイルから参照するとうまく動きません．なぜでしょうか？
発生している問題・エラーメッセージ
alertがうまく作動しない
該当のソースコード
php
1<!-- 新規登録画面 --> 2<!DOCTYPE html> 3<html lang="ja" dir="ltr"> 4 <head> 5 <meta charset="utf-8"> 6 <link rel="stylesheet" href="login_style.css"> 7 <title>新規登録画面</title> 8 <script type="text/javascript"> 9 function CheckForm_New() { 10 if(document.new_form.id.value == "" || document.new_form.password.value == "" || document.new_form.user_name.value == ""){ 11 alert("正しく入力してください"); 12 return false; 13 }else{ 14 return true; 15 } 16 } 17 </script> 18 </head> 19 <body> 20 <!-- <script type="text/javascript" src="login_function.js"></script> --> 21 <?php 22 echo "新規登録をお願いします"; 23 echo "<br>"; 24 ?> 25 <form class="input" name="new_form" action="info.php" method="post"> 26 <h2>ID入力</h2> 27 <input type="text" name="id" placeholder="(例)human"> 28 <br> 29 <h2>パスワード入力</h2> 30 <input type="text" name="password" placeholder="(例)2018"> 31 <br> 32 <h2>ユーザー名</h2> 33 <input type="text" name="user_name" placeholder="(例)人間太郎"> 34 <br> 35 <input type="submit" name="reg" value="登録" onclick="return CheckForm_New()"> 36 </form> 37 </body> 38</html> 39
上記ではうまくいきます
php
1<!DOCTYPE html> 2<html lang="ja" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="login_style.css"> 6 <title>新規登録画面</title> 7 </head> 8 <body> 9 <script type="text/javascript" src="login_function.js"></script> 10 <?php 11 echo "新規登録をお願いします"; 12 echo "<br>"; 13 ?> 14 <form class="input" name="new_form" action="info.php" method="post"> 15 <h2>ID入力</h2> 16 <input type="text" name="id" placeholder="(例)human"> 17 <br> 18 <h2>パスワード入力</h2> 19 <input type="text" name="password" placeholder="(例)2018"> 20 <br> 21 <h2>ユーザー名</h2> 22 <input type="text" name="user_name" placeholder="(例)人間太郎"> 23 <br> 24 <input type="submit" name="reg" value="登録" onclick="return CheckForm_New()"> 25 </form> 26 </body> 27</html> 28
javascript
1// 新規登録のフォームが正しく入力されているかチェック 2function CheckForm_New() { 3 if(document.new_form.id.value == "" || document.new_form.password.value == "" || document.new_form.user_name.value == ""){ 4 alert("正しく入力してください"); 5 return false; 6 }else{ 7 return true; 8 } 9}
試したこと
原因がよくわかりません
補足情報（FW/ツールのバージョンなど）
どなたかお願いします．
ブラウザ開発ツールのコンソールにエラーがでていないか（jsファイルが読み込めない、みたいな）確認してください。また、login_function.jsにalert("test");とだけ書いて実行した結果も教えてください。
Uncaught ReferenceError: Test is not defined at HTMLButtonElement.onclick
このような感じでキャッチできないと出ます！javascriptでは関数は一つしか書けないのでしょうか？
回答1件
0
ベストアンサー
scriptファイルのパスは合っていますか？
今の記述だと、
login_style.css
と同じ場所に
login_function.js
が置いてある必要があります。
それと特に理由がないのであれば、<script>のタグは~~</head>~~</body>の前に置いた方が良いと思いますよ。
javascriptにfunctionを複数個置いていたらダメ
そんなことはありませんよ。
おそらく、login_function.js の中にある他のfunctionなどに、コーディングエラーがあるのでは無いかと思います。
jsは基本、上から順番に処理をしていきますので、
function CheckForm_New() { //中身は略 }
が書かれている部分より上の部分に、コーディングエラーがあれば、jsの処理がそこで終わってしまいます。
その場合、この関数の定義に辿り着けていないので、CheckForm_Newは、未定義になり使えません。
ブラウザの開発コンソール（使い方は調べたらいっぱい出てきます）で、jsのエラーを確認できます。
他の部分のエラーを全て解消しましょう。
投稿2018/05/16 06:43
編集2018/05/16 08:09
総合スコア1910
はい置いています．
javascriptにfunctionを複数個置いていたらダメとかもないみたいなので．．．
mix-peachさん
</head>の前ではなく</body>の前ですね。
mts10806さん
指摘ありがとうございます。function定義程度の軽いjsファイルであれば、</head>前でも問題ないかな、という認識で書いたのですが、文章が「いつでも」のように読み取れることが問題だと思いましたので、ご指摘の通りに修正させていただきました！
あなたの回答
tips
プレビュー
