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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

jquery でのaddEventListenerエラーが発生する

tuchida
tuchida

総合スコア20

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1回答

0グッド

1クリップ

382閲覧

投稿2022/12/01 01:27

編集2022/12/01 04:42

前提

jqueryを利用したjavascriptの外部ファイル(コードに記載しているjavascript全体を「zeiSelect.js」という外部ファイルにしてあります。)ですが、addEventListenerでエラーが発生してしまいます
jqueryを利用したのはjqueryのイベント操作を利用しようとしたためで、このコード実現のために不要ならば利用しなくても構いません
前提はformをloadした際に、以下に存在するselect文を入力可、入力不可の設定をしたいためです。

実現したいこと

エラーの回避方法が知りたい
load時にselect文の条件設定がしたい。

発生している問題・エラーメッセージ

catch側に富んでしまうが内容は不明です

エラーメッセージ

firefoxでデバックしたところ
script.addEventListener('load', function() {
の行からchatch側に飛んでいます

該当のソースコード

javascript

1ソースコード 2try{ 3 var head = document.getElementsByTagName('head'); 4 var script = document.createElement('script'); 5 6 script.setAttribute('src', 'jquery.rtResponsiveTables.min.js'); 7 script.setAttribute('type', 'text/javascript'); 8 script.addEventListener('load', function() { 9 10 $(function() { 11 12 $('input[name=shohizeiSel]').on('keydown keyup keypress change focus blur',function(){ 13 14 var rowMax = 5; 15 var wName = ""; 16 17 $("select[name='shohizeiSel']").change(function() { 18 19 20 if( $(this).val() === '項目別消費税計算' ) { 21 22 console.log("項目別消費税計算"); 23 for (i = 0; i < rowMax; i++){ 24 25 wName = 'shohizeiSel' + Strinig(i); 26 $("select[name=wName]").enableSelection(); 27 28 } 29 }else{ 30 31 console.log("全体消費税計算"); 32 33 for (i = 0; i < rowMax; i++){ 34 35 wName = 'shohizeiSel' + Strinig(i); 36 $("select[name=wName]").disableSelection(); 37 38 } 39 40 } 41 }); 42 43 44 }); 45 46 47 }); 48 49 }); 50 51}catch(e){ 52 53 console.error( e.message ); 54 55} 56```html 57<!DOCTYPE html> 58<html lang="ja-jp" xmlns:th="http://www.thymeleaf.org"> 59<head> 60 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 61  <meta http-equiv="X-UA-Compatible" content="IE=Edge"> 62  <meta name="viewport" content="width=device-width,initial-scale=1"> 63 <title>インフォレント インボイスシステム</title> 64 65  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css"> 66  <link rel="shortcut icon" href="./img/favicon.ico"> 67 68  <link rel="stylesheet" href="./css/menu.css"> 69 70 71  <link href="./bootstrap-5.0.2-dist/css/bootstrap.min.css" rel="stylesheet"> 72</head> 73<body> 74 <script 75 src="https://code.jquery.com/jquery-3.6.1.js" 76 integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" 77 crossorigin="anonymous"> 78 </script> 79 <script src="bootstrap-5.0.2-dist/js/bootstrap.min.js"></script> 80 81 <form class="h-adr" action="mitumorisend.php"> 82 <script src="./js/zeiSelect.js"></script> 83 <div class="row"> 84 <div class="container"> 85 <h1 class="title">インフォレント インボイスシステム</h1> 86 <h2 class="title2" style="text-align:center">(見積入力)</h2> 87 <ul id="dropmenu" class="menuposi"> 88 <li><a href="index.html">ホーム</a> 89 </li> 90 <li><a href="#">見積処理</a> 91 <ul> 92 <li><a href="#">見積入力</a></li> 93 <li><a href="#">見積インポート</a></li> 94 </ul> 95 </li> 96 <li><a href="#">請求処理</a> 97 <ul> 98 <li><a href="seikyu.php">請求入力</a></li> 99 <li><a href="#">請求インポート</a></li> 100 </ul> 101 </li> 102 <li><a href="#">入金確認登録処理</a> 103 <ul> 104 <li><a href="nyukinkakunin.php">入金確認登録入力</a></li> 105 <li><a href="ryoshusho.php">領収書発行</a></li> 106 </ul> 107 </li> 108 <li><a href="#">マスタ管理</a> 109 <ul> 110 <li><a href="torihikimaster.php">取引先マスタ管理</a></li> 111 </ul> 112 </li> 113 </ul> 114 </div> 115 </div> 116 <div class="row m-4"> 117 <div class="col-md-2 col-sm-2"></div> 118 <div class="col-md-10 col-sm-10"> 119 &nbsp;&nbsp;見積日&nbsp;&nbsp;<input type="date" name="mitumoriDay" size="8" maxlength="8"> 120 </div> 121 </div> 122 <div class="row m-4"> 123 <div class="col-md-2 col-sm-2"></div> 124 <div class="col-md-10 col-sm-10"> 125 取引先名 <input type="text" name="torihiki" size="20" maxlength="20" list="TorihikiList" placeholder="取引先入力もしくはダブルクリック" autocomplete="off" ime-mode:active;> 126 <datalist id="TorihikiList"> 127 <?php 128 include("torihikiList1.php"); 129 ?> 130 </datalist> 131 </div> 132 </div> 133 <div class="row m-2"> 134 <div class="col-md-2 col-sm-2"></div> 135 <div class="col-md-10 col-sm-10"> 136 &nbsp;&nbsp;件  名&nbsp;&nbsp;<input type="tel" name="kenmei" size="60" maxlength="60" ime-mode:active;> 137 </div> 138 </div> 139 <div class="row m-2"> 140 <div class="col-md-1 col-sm-1"></div> 141 <div class="col-md-11 col-sm-11"> 142 &nbsp;明細項目&nbsp; 143 <select name="shohizeiSel" id="shohizeiSel" value="消費税計算" onchange=<script src="./js/zeiSelect.js"></script>> 144 <option value="">項目別消費税計算</option> 145 <option value="">全体消費税計算</option> 146 </select> 147 </div> 148 </div> 149 <script src="./js/zeiSelect.js" defer></script> 150 151 <div class="row m-2"> 152 <div class="col-md-1 col-sm-1"></div> 153 <div class="col-md-11 col-sm-11"> 154 <table border="1" name="meisaiList"> 155 <tr bgcolor="#fafad2"> 156 <th width="300" border="1" style="text-align:center">請求明細</th> 157 <th width="80" border="1" style="text-align:center">単価</th> 158 <th width="50" border="1" style="text-align:center">数量</th> 159 <th width="200" border="1" style="text-align:center">金 額</th> 160 <th width="80" border="1" style="text-align:center">税 率</th> 161 <th width="200" border="1" style="text-align:center">税 額</th> 162 <th width="200" border="1" style="text-align:center">小 計</th> 163 <th width="100" border="1" style="text-align:center">適 用</th> 164 </tr> 165 <tr> 166 <td width="300" border="1" contenteditable="true" type="tel" ime-mode:active;></td> 167 <td width="80" border="1" contenteditable="true" type="number"></td> 168 <td width="50" border="1" contenteditable="true" type="number"></td> 169 <td width="200" border="1" contenteditable="true" type="number"></td> 170 <td width="80" border="1" contenteditable="false"> 171 <select name="shohizeiSel" id="shohizeiSel0" value="消費税計算"> 172 <option value="">10%</option> 173 <option value=""> 8%</option> 174 </select> 175 </td> 176 <td width="200" border="1" contenteditable="falss"></td> 177 <td width="200" border="1" contenteditable="falss"></td> 178 <td width="200" border="1" contenteditable="falss"></td> 179 </tr> 180 <tr> 181 <td width="300" border="1" contenteditable="true"></td> 182 <td width="80" border="1" contenteditable="true"></td> 183 <td width="50" border="1" contenteditable="true"></td> 184 <td width="200" border="1" contenteditable="true"></td> 185 <td width="80" border="1" contenteditable="false"> 186 <select name="shohizeiSel" id="shohizeiSel1" value="消費税計算"> 187 <option value="">10%</option> 188 <option value=""> 8%</option> 189 </select> 190 </td> 191 <td width="200" border="1" contenteditable="falss"></td> 192 <td width="200" border="1" contenteditable="falss"></td> 193 <td width="200" border="1" contenteditable="falss"></td>

以下のような質問にはグッドを送りましょう

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

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

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

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

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

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

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

適切な質問に修正を依頼しましょう。

maisumakun

2022/12/01 01:48

> console.error( e.message ); こちらはどのような出力を行っていますか?
tuchida

2022/12/01 01:59

やりたいことは、select文で選択した内容をもとに以降にあるselect文を入力不可もしくは入力可にしたいのですが、 また、エラーの現状を追記しました
maisumakun

2022/12/01 02:11

コンソールに出力はされていないのですか?
tuchida

2022/12/01 02:41

コンソールには出力がありません
Cocode

2022/12/01 03:21

try/catch削除して、tryの中身だけで実行したらエラー文でないでしょうか?
tuchida

2022/12/01 03:25

やってみましたが出ないでパスしてしまいます。 それと気になっているのは2回回っています
Cocode

2022/12/01 03:35 編集

jQueryの $(function() {...}) ←これって、 $(document).ready(function(){...}) ←の省略形なんですよね。 なので、addEventListener('load', ...) の中に $(function() {...}) をかくと、「ロードしたら、ロードしたら」って2回ロードしたらイベントしてる感じでちょっと気持ち悪いですね。 $(function() {...}) をはずしてみて、その中身だけにしたらどうなりますか?
yambejp

2022/12/01 03:46

とりあえず、jqueryか素の(Vanilla)js かに統一した方が問題の切り分けができると思います
Cocode

2022/12/01 03:49

script.addEventListener('load', function() {}) ではなく window.addEventListener('load', function() {}) に修正したらとりあえずエラーはでるようになると思います。
tuchida

2022/12/01 03:50

内部をパスしてjquery内のindex.jsで document.addEventListener('DOMContentLoaded', () => { を実行後何もエラーなく戻ってきました
tuchida

2022/12/01 03:53

window.addEventListener('load', function() {})にしてみましたが 結果は同じでなにもエラーが出ていませんが実行していません
int32_t

2022/12/01 04:04

HTML 中に input[name=shohizeiSel] や select[name='shohizeiSel'] に相当する要素は存在するのですか。
Cocode

2022/12/01 04:07 編集

・「内部をパス」とはどういう意味ですか?なんの内部? ・「jquery内のindex.jsで」とはどういう意味ですか?index.jsとは何がかかれているコードでどこで読み込まれているのですか? ・そもそもご提示のJSコードは、どのファイルに書かれているのですか? ・素のJavaScriptとjQueryを混在してかくことは非推奨です。jQueryかJavaScriptどちらかに統一してはいけないのでしょうか? ・formの中身のHTMLが省略されているので判断が難しいです。質問を更新してご提示いただけないでしょうか。
int32_t

2022/12/01 04:54

> script.addEventListener('load', function() { > の行からchatch側に飛んでいます であれば、catch 節の console.error(e.message) で何か表示されるはずなんですけどね。

回答1

0

ベストアンサー

js

1 var script = document.createElement('script'); 2 script.setAttribute('src', 'jquery.rtResponsiveTables.min.js'); 3 script.setAttribute('type', 'text/javascript'); 4 script.addEventListener('load', function() {

このコードで生成した <script>documentのツリーに繋がっていないため、スクリプトのロードは始まりません。head[0].appendChild(script) などで繋いておきましょう。
また、ドキュメント中に input[name=shohizeiSel] select[name='shohizeiSel'] にマッチする要素がない場合は何も起きません。

投稿2022/12/01 04:27

編集2022/12/01 04:27
int32_t

総合スコア17200

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

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

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

このような回答には修正を依頼しましょう。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。