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

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

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

解決済

htmlに直書きしていたjavascriptコードを外部ファイルに設定したら、イベントが効く部分と効かない部分があるのを修正したい

obama
obama

総合スコア11

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

2回答

0評価

2クリップ

461閲覧

投稿2022/04/27 03:51

初めて利用させていただいております。

質問は、htmlに直書きしていたモーダルウィンドウのボタンとjavascriptを外部ファイルとして設置すると、直書きしていた場合に動いてたイベント(ボタンをクリックするとテキストエリアに数字が表示される)ものが、表示される時と表示されない時がある為、常に表示されるようにしたいです。
javascriptの実行タイミングの問題なのではないかと考えているのですが、ご教示頂ければ幸いです。
何卒、宜しくお願い致します。

以下は直書きしてるhtmlです

<!DOCTYPE html> <html lang="jp"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="css/reset.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="temp/common/smart/css/form_mw.css"> <script> $(function () { $("#mwd").load("modal_window_days.html"); }); </script> <title></title> </head> <body> <form> <div class="form_wrapper"> <div class="form_container"> <fieldset class="form_sex"> //省略 <!--modal_date--> <div class="modal js_modal_m"> <div class="modal_bg js_modal_close"></div> <div class="modal_content"> <ul id="time"> //省略 </ul> <a class="js_modal_close btn_close" href="">閉じる</a> </div> </div> <div class="modal js_modal_d"> <div class="modal_bg js_modal_close"></div> <div class="modal_content"> <ul id="time"> //省略 </ul> <a class="js_modal_close btn_close" href="">閉じる</a> </div> </div> <!--modal_date--> </fieldset> </div> </div> </form> <script> $(function () { $('.js_modal_open_m').on('click', function () { $('.js_modal_m').fadeIn(); return false; }); }); $(function () { $('.js_modal_open_d').on('click', function () { $('.js_modal_d').fadeIn(); return false; }); }); $(function () { $('.js_modal_close').on('click', function () { $('.js_modal_m,.js_modal_d').fadeOut(); return false; }); }); </script> <script> (function () { var time = new Date(); var seireki = time.getFullYear(); for (var i = 1900; i <= seireki; i++) { $("#year").get(0).options[i - 1899] = new Option(i); } }()); </script> <script> $(function () { $('#time li.btn_month').click(function () { var index = $(this).index() + 1; $('.month_area').val(index); }); }); </script> <script> $(function () { $('#time li.btn_day').click(function () { var index = $(this).index() + 1; $('.date_area').val(index); }); }); </script> <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script> <script type="text/javascript" src="./temp/common/smart/js/maodal_time.js"></script> </body> </html>

以下は外部にjavascriptを設置したhtmlになります。

<!DOCTYPE html> <html lang="jp"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="css/reset.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="temp/common/smart/css/form_mw.css"> <title>y_20220204</title> </head> <body> <form> <div class="form_wrapper"> <div class="form_container"> //省略 <div id="mwd"></div> </fieldset> </div> </div> </form> <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script> <script> $(function () { $("#mwd").load("modal_window_days.html"); }); </script> <script type="text/javascript" src="./temp/common/smart/js/maodal_time.js"></script> </body> </html>

以下は外部に設置したjavascriptです。

'use strict'; //モーダル 呼び出し var xhr = new XMLHttpRequest(), method = "GET", url = "modal_window_days.html"; var mwd = document.getElementById("mwd"); xhr.open(method, url, true); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { var modal = xhr.responseText; //String型で取得 mwd.innerHTML = modal; //完了 } }; xhr.send(); //モーダル 要素の動き $(function () { $('.js_modal_open_m').on('click', function () { $('.js_modal_m').fadeIn(); return false; }); }); $(function () { $('.js_modal_open_d').on('click', function () { $('.js_modal_d').fadeIn(); return false; }); }); (function () { var time = new Date(); var seireki = time.getFullYear(); for (var i = 1900; i <= seireki; i++) { $("#year").get(0).options[i - 1899] = new Option(i); } }()); $(function () { $('.js_modal_close').on('click', function () { $('.js_modal_m,.js_modal_d').fadeOut(); return false; }); }); $(function () { $('#time li.btn_month').on('click', function () { var index = $(this).index() + 1; $('.month_area').val(index); }); }); $(function () { $('#time li.btn_day').on('click', function () { var index = $(this).index() + 1; $('.date_area').val(index); }); });

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

SurferOnWww

2022/04/27 03:55

> 表示される時と表示されない時がある為、 ということは問題を 100% 再現できる手順が無い(もしくは見つかってない)ということですか?
int32_t

2022/04/27 04:01

ブラウザの開発者ツールのコンソールになにかエラーが出ていますか?
obama

2022/04/27 04:25

早速のご回答、恐れ入ります。 SurferOnWww 様 仰る通り、問題を 100% 再現できる手順が無い(もしくは見つかってない)状態です int32_t 様 開発者ツールのコンソールには該当のエラーはなく、 イベントリスナーにはclickイベントが表示される時と表示されないことがあります。
Lhankor_Mhy

2022/04/27 04:55

ご提示の「直書き」の方のコードを試してみましたが、エラーが出て動きませんでした。 おそらく、ご提示いただいていない部分が重要なのではないかと思います。
obama

2022/04/27 06:23

Lhankor_Mhy 様 お世話になっております。 以下、省略部分のhtmlになります <form> <div class="form_wrapper"> <div class="form_container"> <fieldset class="form_sex"> <img src="img/ttl_sex.png" alt=""> <div class="form_sex_icon"> <p><img src="img/sex-m.png" alt="男"></p> <p><img src="img/sex-f.png" alt="女"></p> </div> </fieldset> <fieldset class="form_bd"> <select name="b_y" id="year"> <option value="1">--西暦--</option> </select> 年 <input type="text" name="b_m" value="" class="month_area js_modal_open_m" readonly> 月 <input type="text" name="b_d" value="" class="date_area js_modal_open_d" readonly> 日 <div class="content"> <a class="js_modal_open" href="">modal</a> </div> <!--modal_date--> <div class="modal js_modal_m"> <div class="modal_bg js_modal_close"></div> <div class="modal_content"> <ul id="time"> <li class="js_modal_close btn_month"><a href="#">1月</a></li> <li class="js_modal_close btn_month"><a href="#">2月</a></li> <li class="js_modal_close btn_month"><a href="#">3月</a></li> <li class="js_modal_close btn_month"><a href="#">4月</a></li> <li class="js_modal_close btn_month"><a href="#">5月</a></li> <li class="js_modal_close btn_month"><a href="#">6月</a></li> <li class="js_modal_close btn_month"><a href="#">7月</a></li> <li class="js_modal_close btn_month"><a href="#">8月</a></li> <li class="js_modal_close btn_month"><a href="#">9月</a></li> <li class="js_modal_close btn_month"><a href="#">10月</a></li> <li class="js_modal_close btn_month"><a href="#">11月</a></li> <li class="js_modal_close btn_month"><a href="#">12月</a></li> </ul> <a class="js_modal_close btn_close" href="">閉じる</a> </div> </div> <div class="modal js_modal_d"> <div class="modal_bg js_modal_close"></div> <div class="modal_content"> <ul id="time"> <li class="js_modal_close btn_day"><a href="#">1日</a></li> <li class="js_modal_close btn_day"><a href="#">2日</a></li> <li class="js_modal_close btn_day"><a href="#">3日</a></li> <li class="js_modal_close btn_day"><a href="#">4日</a></li> <li class="js_modal_close btn_day"><a href="#">5日</a></li> <li class="js_modal_close btn_day"><a href="#">6日</a></li> <li class="js_modal_close btn_day"><a href="#">7日</a></li> <li class="js_modal_close btn_day"><a href="#">8日</a></li> <li class="js_modal_close btn_day"><a href="#">9日</a></li> <li class="js_modal_close btn_day"><a href="#">10日</a></li> <li class="js_modal_close btn_day"><a href="#">11日</a></li> <li class="js_modal_close btn_day"><a href="#">12日</a></li> <li class="js_modal_close btn_day"><a href="#">13日</a></li> <li class="js_modal_close btn_day"><a href="#">14日</a></li> <li class="js_modal_close btn_day"><a href="#">15日</a></li> <li class="js_modal_close btn_day"><a href="#">16日</a></li> <li class="js_modal_close btn_day"><a href="#">17日</a></li> <li class="js_modal_close btn_day"><a href="#">18日</a></li> <li class="js_modal_close btn_day"><a href="#">19日</a></li> <li class="js_modal_close btn_day"><a href="#">20日</a></li> <li class="js_modal_close btn_day"><a href="#">21日</a></li> <li class="js_modal_close btn_day"><a href="#">22日</a></li> <li class="js_modal_close btn_day"><a href="#">23日</a></li> <li class="js_modal_close btn_day"><a href="#">24日</a></li> <li class="js_modal_close btn_day"><a href="#">25日</a></li> <li class="js_modal_close btn_day"><a href="#">26日</a></li> <li class="js_modal_close btn_day"><a href="#">27日</a></li> <li class="js_modal_close btn_day"><a href="#">28日</a></li> <li class="js_modal_close btn_day"><a href="#">29日</a></li> <li class="js_modal_close btn_day"><a href="#">30日</a></li> <li class="js_modal_close btn_day"><a href="#">31日</a></li> </ul> <a class="js_modal_close btn_close" href="">閉じる</a> </div> </div> <!--modal_date--> </fieldset> </div> </div> </form>
Lhankor_Mhy

2022/04/27 06:25

やはりエラーが出ます。おそらく、実際のコードと異なる部分が重要なのだと思います。
obama

2022/04/27 09:15

Lhankor_Mhy 様 ご確認、ありがとうございます。 再度、修正検討したいと思います

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。