モーダルウィンドウの検索をかけると、コンソールでエラーがでる。

モーダルウィンドウの検索をかけるとコンソールエラーがでる。

</body>の前にスクリプトを置いたり、 onloadに変えたりしたのですが、（←エラー出たままだったので戻しました）エラーが出たままです。

html
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <meta name="robots" content="noindex,nofollow">
6
7    <!-- ビューポートの設定 -->
8    <meta name="viewport" content="width=device-width, initial-scale=1.0">
9
10    <!-- スタイルシートの読み込み -->
11    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
12    <title>デモ</title>
13    <style>
14        #modal-content{
15            max-height: calc(100vh - 1.5em);
16            width:50%;
17            margin:1.5em auto 0;
18            padding:10px 20px;
19            border:2px solid #aaa;
20            background:#fff;
21            z-index:2;
22            position:fixed;
23            display:none;
24            overflow: auto;
25        }
26
27        .button-link{
28            margin-left : 60px;
29            text-align:center;
30            -moz-border-radius: 5px;
31            -webkit-border-radius: 5px;
32            border-radius: 5px;
33        }
34
35        .button-link:hover{
36            cursor:pointer;
37            color:#f00;
38        }
39
40        #modal-overlay{
41            z-index:1;
42            display:none;
43            position:fixed;
44            top:0;
45            left:0;
46            width:100%;
47            height:120%;
48            background-color:rgba(0,0,0,0.75);
49        }
50        td{
51            padding:5px;
52        }
53    </style>
54</head>
55
56<body>
57    <h1 style="text-align:center;color:#d36015;">デモ</h1>
58
59    <HR style="margin: 3em 0 ;">
60
61    <!--                              -->
62    <!-- ここからモーダルウィンドウ       -->
63    <!-- モーダルウィンドウのコンテンツ開始 -->
64    <!--                              -->
65
66    <div id="modal-content">
67        <p><a id="modal-close1" class="button-link">[閉じる]</a></p>
68        <form name="childfrm" action="" method="post">
69            <input id="btn4444" type="button" value="値を渡す">
70        </form>
71        <input type="text" id="search"> <input type="button" value="絞り込む" id="button"> <input type="button" value="すべて表示" id="button2">
72
73        <p id="kekka" style="display:none;height:50px;width:300px;text-align:center;"></p>
74        
75        <table id="result" style="border-spacing:0;">
76            <thead>
77                <tr><th>✔️</th><th>列１</th><th>列２</th><th>列3</th><th>列4</th></tr>
78            </thead>
79            <tbody>
80                <tr>
81                    <td><input type="radio" name="hoge" class="hoge" value="1" /></td>
82
83                    <td>地域A</td>
84                    <td>てすとCCC</td>
85                    <td>300</td>
86                    <td>1300</td>
87                </tr>
88                <tr>
89                    <td><input type="radio" name="hoge" class="hoge" value="1" /></td>
90                    <td>地域A</td>
91                    <td>てすとBBA</td>
92                    <td>400</td>
93                    <td>500</td>
94                </tr>
95                <tr>
96                    <td><input type="radio" name="hoge" class="hoge" value="1" /></td>
97                    <td>地域A</td>
98                    <td>てすとAA</td>
99                    <td>1000</td>
100                    <td>2000</td>
101                </tr>
102               
103                <tr>
104                    <td><input type="radio" name="hoge" class="hoge" value="1" /></td>
105                    <td>地域C</td>
106                    <td><label style="display:none;">地域CてすとB</label>てすとB</td>
107                    <td>115</td>
108                    <td>600</td>
109                </tr>
110                <tr>
111                    <td><input type="radio" name="hoge" class="hoge" value="1" /></td>
112                    <td>地域C</td>
113                    <td><label style="display:none;">地域CてすとE</label>てすとE</td>
114                    <td>300</td>
115                    <td>400</td>
116                </tr>
117            </tbody>
118        </table>
119
120        <p><a id="modal-close2" class="button-link">[閉じる]</a></p>
121    </div>
122        <!--                              -->
123        <!-- モーダルウィンドウのコンテンツ終了 -->
124        <!--                              -->
125
126
127    <p><a id="modal-open" class="button-link">クリックするとモーダルウィンドウを開きます。</a></p>
128    <!-- ここまでモーダルウィンドウ -->
129
130    <HR style="margin: 3em 0 ;">
131
132    <p id="subresult1">ここに表示</p>
133
134
135    <script>
136
137        jQuery(function($){
138            //モーダルウィンドウを出現させるクリックイベント
139            $("#modal-open").click( function(){
140                //キーボード操作などにより、オーバーレイが多重起動するのを防止する
141                $( this ).blur() ;    //ボタンからフォーカスを外す
142                if( $( "#modal-overlay" )[0] ) return false ;        //新しくモーダルウィンドウを起動しない (防止策1)
143                //if($("#modal-overlay")[0]) $("#modal-overlay").remove() ;        //現在のモーダルウィンドウを削除して新しく起動する (防止策2)
144
145                //オーバーレイを出現させる
146                $( "body" ).append( '<div id="modal-overlay"></div>' );
147                $( "#modal-overlay" ).fadeIn( "slow" );
148
149                //コンテンツをセンタリングする
150                centeringModalSyncer();
151
152                //コンテンツをフェードインする
153                $( "#modal-content" ).fadeIn( "slow" ) ;
154
155                //[#modal-overlay]、または[#modal-close1]や2,btn4444をクリックしたら…
156                $( "#modal-overlay,#modal-close1,#modal-close2,#btn4444" ).unbind().click( function(){
157                    //[#modal-content]と[#modal-overlay]をフェードアウトした後に…
158                    $( "#modal-content,#modal-overlay" ).fadeOut( "slow" , function(){
159                        //[#modal-overlay]を削除する
160                        $('#modal-overlay').remove() ;
161                    });
162                });
163            });
164
165            //リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する
166            $( window ).resize( centeringModalSyncer );
167            //センタリングを実行する関数
168            function centeringModalSyncer() {
169                //画面(ウィンドウ)の幅、高さを取得
170                var w = $( window ).width() ;
171                var h = $( window ).height() ;
172
173                // コンテンツ(#modal-content)の幅、高さを取得
174                // jQueryのバージョンによっては、引数[{margin:true}]を指定した時、不具合を起こします。
175                //        var cw = $( "#modal-content" ).outerWidth( {margin:true} );
176                //        var ch = $( "#modal-content" ).outerHeight( {margin:true} );
177                var cw = $( "#modal-content" ).outerWidth();
178                var ch = $( "#modal-content" ).outerHeight();
179
180                //センタリングを実行する
181                $( "#modal-content" ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ;
182            }
183        });
184
185
186
187
188        document.addEventListener("DOMContentLoaded", () => {
189            document.querySelector("#button").addEventListener("click", ()=>{
190                var re = new RegExp(document.querySelector('#search').value);
191                document.querySelectorAll('#result tbody tr').forEach(el => {
192                    var txt  = el.querySelectorAll("td")[1].innerHTML;
193                    var txt2 = el.querySelectorAll("td")[2].innerHTML;
194
195                    if(txt.match(re) == null && txt2.match(re) == null){
196                        //el.style.color = "black";
197                        el.style.display="none";
198                    }else{
199                        //el.style.color = "Red";
200                        el.style.display="table-row";
201                    }
202                });
203            });
204
205            document.querySelector("#button2").addEventListener("click", ()=>{
206                document.querySelector('#search').value = '';
207                // document.querySelectorAll('#result tr').forEach(el => el.style.color = "black");
208                document.querySelectorAll('#result tr').forEach(el =>    el.style.display="table-row");
209            });
210
211            document.querySelector("#btn4444").addEventListener("click", ()=>{
212            //$("#subresult1").text(window.line);  
213                function TableSelect (table, x = 1, y = 1) {
214                    let q = `tr:nth-of-type(${y}) td:nth-of-type(${x})`;
215                    return table.querySelector (q).textContent;
216                }
217                if(window.line==undefined){
218                }else{
219                    $("#subresult1").text(TableSelect(document.querySelector('table'), 5, window.line+1));  
220                }
221            });
222
223            $('input[type="radio"]').change(function() {
224                //選択したvalue値を変数に格納
225                window.line = $(this).parents('tr').index();
226            });
227        });
228    </script>
229
230
231    </body>
232</html>
233
234

m.ts10806

2020/09/24 12:02

どのようなエラーでしょうか。 https://teratail.com/help/question-tips#questionTips3-4-2

Miii

2020/09/24 12:17

お返事ありがとうございます。 Uncaught TypeError: Cannot read property 'innerHTML' of undefined at modal-sub.html:318 at NodeList.forEach (<anonymous>) at HTMLInputElement.<anonymous> (modal-sub.html:317) (anonymous) @ modal-sub.html:318 (anonymous) @ modal-sub.html:317 とのエラーが表示されます。

yambejp

2020/09/24 12:40

jQueryに通常のJSを混在させていますがjQueryに統一してみては？

m.ts10806

2020/09/24 13:38

質問は編集できますので質問本文に記載してください。

m.ts10806

2020/09/24 13:40

あと、コードは整理された方が良いですね。入り混じっていますし、インデント滅茶苦茶で読みづらいです。（つまり、回答者側に優しくない）

Miii

2020/09/24 14:00

yambejpさん jqueryに統一するためにコード書き換えますね。 m.ts10806さんご指摘ありがとうございます。コードの整理と、インデントつけさせていただきますね。

Miii

2020/09/24 14:49

コードの整理をしていくことで、無事エラーが消えました！ありがとうございます！

行動規範の内容に同意します

回答1件

自己解決

コードの整理をすることで、エラーが消えました。ありがとうございます。

【整理したこと】
・体裁を整える（インデント、改行）
結果：<tr>が余分に記述していたのが見つかりました。
・scriptやstyleのコードをまとめた。
結果：ひとつにまとめたことで１箇所をみるだけで把握できるように。
・jqueryとjavascriptを併用していたところを統一（jqueryに変えるとエラーが出る部分はそのまま残しました）
結果：コンソールエラーが消えました。

投稿2020/09/24 14:49

編集2020/09/25 05:06

Miii

総合スコア30