Q&A
追記修正のコードの実行結果どうなったのか書かれないと次のアドバイスもなにもないかと
製作中のLP上で、JSで問い合わせフォームのモーダルウィンドウ表示、その問い合わせフォームをphpにて書きました。
VS Codeでデバックしたところ、どうやらphpに行く前にJSのところでエラーが起こっているようでした。
その際のエラー内容がUncaught TypeError: Cannot read property 'addEventListener' of nullと出てきます。
こちらの解決方法のご教授をお願い致します。
以下コードです。
HTML
1<div class="priceList-container"> 2 3 <div class="priceList"> 4 <div class="planName planName-two"> 5 <p>トライアルプラン</p> 6 </div> 7 <div class="price"> 8 <p><span class="zero">¥</span><span class="priseNumber-zero">0</span><span class="mounth-zero">/月</span></p> 9 </div> 10 <div class="planNave"> 11 <p>○○○○○○○○○○○○</p> 12 <p>○○○○○○○○○○○○○○○○○○○○○○</p> 13 </div> 14 15 <div class="planList-two"> 16 <div class="planContents"> 17 <p>○○○○○○○○○○○</p> 18 </div> 19 <div class="border"></div> 20 <div class="planContents"> 21 <p>○○○○○○○○○</p> 22 </div> 23 <div class="border"></div> 24 <div class="planContents"> 25 <p>○○○○○○○○○</p> 26 </div> 27 <div class="border"></div> 28 <div class="planContents"> 29 <p>○○○○○○○○○○</p> 30 </div> 31 <div class="border"></div> 32 <div class="planContents"> 33 <p>○○○○○○○○○○○○</p> 34 </div> 35 </div> 36 <button id="openModal">申し込み</button> 37 </div> 38 39 <div class="priceList"> 40 <div class="planName planName-two"> 41 <p>○○○○○○○○○○○○○○</p> 42 </div> 43 <div class="price"> 44 <p>¥<span class="priseNumber">19,800</span><span class="mounth">/月</span></p> 45 </div> 46 <div class="planNave"> 47 <p>○○○○○○○○○○○○○○○○○○○</p> 48 </div> 49 50 <div class="planList"> 51 <div class="planContents"> 52 <p>○○○○○○○○○○○○○○</p> 53 </div> 54 <div class="border"></div> 55 <div class="planContents"> 56 <p>○○○○○○○○○○</p> 57 </div> 58 <div class="border"></div> 59 <div class="planContents"> 60 <p>○○○○○○○○○○○</p> 61 </div> 62 <div class="border"></div> 63 <div class="planContents"> 64 <p>○○○○○○○○○○</p> 65 </div> 66 <div class="border"></div> 67 <div class="planContents"> 68 <p>○○○○○○○○○○○</p> 69 </div> 70 </div> 71 <button id="openModal2">申し込み</button> 72 </div> 73 74 <div class="priceList"> 75 <div class="planName planName-two"> 76 <p>○○○○○○○○○○○</p> 77 </div> 78 <div class="price"> 79 <p>¥<span class="priseNumber">66,800</span><span class="mounth">/月</span></p> 80 </div> 81 <div class="planNave"> 82 <p>○○○○○○○○○○○○○○○○○○</p> 83 <p>○○○○○○○○○○○○</p> 84 </div> 85 86 <div class="planList-two"> 87 <div class="planContents"> 88 <p>○○○○○○○○○○○○○○○○○○○○</p> 89 </div> 90 <div class="border"></div> 91 <div class="planContents"> 92 <p>○○○○○○○○○○○○○○○○○○○</p> 93 </div> 94 <div class="border"></div> 95 <div class="planContents"> 96 <p>○○○○○○○○○○○○○○○○○○○</p> 97 </div> 98 <div class="border"></div> 99 <div class="planContents"> 100 <p>○○○○○○○○○○○○○○○○○</p> 101 </div> 102 <div class="border"></div> 103 <div class="planContents"> 104 <p>○○○○○○○○○○○○○○○</p> 105 </div> 106 </div> 107 <button id="openModal3">申し込み</button> 108 </div> 109 110 <div class="priceList"> 111 <div class="planName planName-two"> 112 <p>プラチナプラン</p> 113 </div> 114 <div class="price"> 115 <p>¥<span class="priseNumber">100,000</span><span class="mounth">/月</span></p> 116 </div> 117 <div class="planNave"> 118 <p>○○○○○○○○○○○○○○○○○○○○○○</p> 119 </div> 120 121 <div class="planList"> 122 <div class="planContents"> 123 <p>○○○○○○○○○○○○○</p> 124 </div> 125 <div class="border"></div> 126 <div class="planContents"> 127 <p>○○○○○○○○○○○○○○</p> 128 </div> 129 <div class="border"></div> 130 <div class="planContents"> 131 <p>○○○○○○○○○○○○○○○</p> 132 </div> 133 <div class="border"></div> 134 <div class="planContents"> 135 <p>○○○○○○○○○○○○○○○○○○</p> 136 </div> 137 <div class="border"></div> 138 <div class="planContents"> 139 <p>○○○○○○○○○○○○○○○</p> 140 </div> 141 </div> 142 <button id="openModal4">申し込み</button> 143 </div> 144 145 </div> 146 147<section id="modalArea" class="modalArea"> 148 <div id="modalBg" class="modalBg"></div> 149 <div class="modalWrapper"> 150 <div class="modalContents"> 151 <div class="modal-container"> 152 <div class="modal-h1"> 153 <hi>申し込みフォーム</hi> 154 </div> 155 <div class="form"> 156 <form action="" method="post"> 157 <div class="nameSelect"> 158 <p>お名前</p> 159 <div class="NameBox"> 160 <input type="text" name="yourname" required value="<?php echo h($yourname); ?>"> 161 </div> 162 </div> 163 <div class="nameSelect"> 164 <div class="denwa"> 165 <p>電話番号</p> 166 </div> 167 <div class="NameBox"> 168 <input type="tel" name="yourtel" required value="<?php echo h($yourtel); ?>"> 169 </div> 170 </div> 171 <div class="nameSelect"> 172 <div class="omise"> 173 <p>お店やサービスのHP</p> 174 </div> 175 <div class="NameBox"> 176 <input type="url" name="yoururl" required value="<?php echo h($yoururl); ?>"> 177 </div> 178 </div> 179 <div class="nameSelect"> 180 <div class="moushi"> 181 <p>申し込みプラン</p> 182 </div> 183 <div class="cp_ipselect cp_sl01"> 184 <select required> 185 <option value="" hidden>選択してください</option> 186 <option value="トライアルプラン">トライアルプラン</option> 187 <option value="スタンダードプラン">スタンダードプラン</option> 188 <option value="ビシネスプラン">ビジネスプラン</option> 189 <option value="プラチナプラン">プラチナプラン</option> 190 </select> 191 </div> 192 </div> 193 <div class="nameSelect"> 194 <div class="insta"> 195 <p>お店のURL</p> 196 </div> 197 <div class="NameBox"> 198 <input type="url" name="youromise" required value="<?php echo h($youromise); ?>"> 199 </div> 200 </div> 201 <div class="nameSelect"> 202 <div class="renraku"> 203 <p>ご連絡希望時間</p> 204 </div> 205 <div class="NameBox"> 206 <input type="text" name="yourtime" required value="<?php echo h($yourtime); ?>"> 207 </div> 208 </div> 209 </form> 210 <!--<a href="#" class="btn-flat-border">送信</a>--> 211 <button name="submitted" id="closeModal" class="btn-flat-border closeModal">送信</button> 212 </div> 213 </div> 214 </div> 215 </div> 216 </section> 217 <!--モーダルエリア1ここまで -->
JS
1 const modalArea = document.getElementById('modalArea'); 2 const openModal = document.getElementById('openModal'); 3 const openModal2 = document.getElementById('openModal2'); 4 const openModal3 = document.getElementById('openModal3'); 5 const openModal4 = document.getElementById('openModal4'); 6 const closeModal = document.getElementById('closeModal'); 7 const modalBg = document.getElementById('modalBg'); 8 const toggle = [openModal,openModal2,openModal3,openModal4,closeModal,modalBg]; 9 10 for(let i=0, len=toggle.length ; i<len ; i++){ 11 toggle[i].addEventListener('click',function(){ 12 modalArea.classList.toggle('is-show'); 13 },false); 14 };
何卒、宜しくお願い致します。
回答1件
0
openModalxといったidのついたHTML要素がありません
またidをスペース区切りでなにかしようとしているようですが
そんな書き方は許されていません
投稿2020/08/02 15:23
総合スコア116734
あなたの回答
tips
プレビュー
