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

前提

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>

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

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

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件

ベストアンサー

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

総合スコア20832