Q&A
>エラーを起こす
エラーは不具合発生個所を特定したり、対応を検討したりするための重要な情報です。
出力されているエラーを改変無く質問文に追記をお願いします。
前提
ローンシミュレーターの組み込みをしていて、
function $(id) { return document.getElementById(id); }
と記述しているサンプルをコピーして、動作をチェックしたところ
swiperとハンバーガーメニューが動かなくなりました。
上記のコードを外すとswiperとハンバーガーメニューの動作は問題なく動くため、
function $(id) { return document.getElementById(id); }が原因ではないかと思っています。
実現したいこと
swiperとハンバーガーメニューがしっかり動きつつ、ローンシミュレーターも問題なく動くようにしたい。
該当のソースコード
<div class="swiper"> <ul class="slider"> <li><a href="<?php the_field('img01'); ?>" rel="lightbox"><img src="<?php the_field('img01'); ?>"></a></li> <?php $null = ""; ?> <?php $img02 = get_field('img02'); ?> <?php if($null != $img02){ ?> <li><a href="<?php the_field('img02'); ?>" rel="lightbox"><img src="<?php the_field('img02'); ?>"></a></li> <?php } ?> <?php $img03 = get_field('img03'); ?> <?php if($null != $img03){ ?> <li><a href="<?php the_field('img03'); ?>" rel="lightbox"><img src="<?php the_field('img03'); ?>"></a></li> <?php } ?> <?php $img04 = get_field('img04'); ?> <?php if($null != $img04){ ?> <li><a href="<?php the_field('img04'); ?>" rel="lightbox"><img src="<?php the_field('img04'); ?>"></a></li> <?php } ?> <?php $img05 = get_field('img05'); ?> <?php if($null != $img05){ ?> <li><a href="<?php the_field('img05'); ?>" rel="lightbox"><img src="<?php the_field('img05'); ?>"></a></li> <?php } ?> <?php $img06 = get_field('img06'); ?> <?php if($null != $img06){ ?> <li><a href="<?php the_field('img06'); ?>" rel="lightbox"><img src="<?php the_field('img06'); ?>"></a></li> <?php } ?> <?php $img07 = get_field('img07'); ?> <?php if($null != $img07){ ?> <li><a href="<?php the_field('img07'); ?>" rel="lightbox"><img src="<?php the_field('img07'); ?>"></a></li> <?php } ?> <?php $img08 = get_field('img08'); ?> <?php if($null != $img08){ ?> <li><a href="<?php the_field('img08'); ?>" rel="lightbox"><img src="<?php the_field('img08'); ?>"></a></li> <?php } ?> <?php $img09 = get_field('img09'); ?> <?php if($null != $img09){ ?> <li><a href="<?php the_field('img09'); ?>" rel="lightbox"><img src="<?php the_field('img09'); ?>"></a></li> <?php } ?> <?php $img10 = get_field('img10'); ?> <?php if($null != $img10){ ?> <li><a href="<?php the_field('img10'); ?>" rel="lightbox"><img src="<?php the_field('img10'); ?>"></a></li> <?php } ?> </ul> <p>大きな画像をクリックで全体画像が表示されます。</p> <ul class="thumb"> <li><img src="<?php the_field('img01'); ?>"></li> <?php if($null != $img02):?> <li><img src="<?php the_field('img02'); ?>"></li> <?php endif; ?> <?php if($null != $img03):?> <li><img src="<?php the_field('img03'); ?>"></li> <?php endif; ?> <?php if($null != $img04):?> <li><img src="<?php the_field('img04'); ?>"></li> <?php endif; ?> <?php if($null != $img05):?> <li><img src="<?php the_field('img05'); ?>"></li> <?php endif; ?> <?php if($null != $img06):?> <li><img src="<?php the_field('img06'); ?>"></li> <?php endif; ?> <?php if($null != $img07):?> <li><img src="<?php the_field('img07'); ?>"></li> <?php endif; ?> <?php if($null != $img08):?> <li><img src="<?php the_field('img08'); ?>"></li> <?php endif; ?> <?php if($null != $img09):?> <li><img src="<?php the_field('img09'); ?>"></li> <?php endif; ?> <?php if($null != $img10):?> <li><img src="<?php the_field('img10'); ?>"></li> <?php endif; ?> </ul> </div> <div class="loan-area ac"><!-- ハンバーガーメニュー --> <p class="loan-bt btn">ローンシミュレーター</p> <div class="loan-area-in"> <h4>ローンシミュレーター</h4> <p>借入金額</p> <p><input id="amount" type="text" value="3000">万円</p> <p>（ボーナス払い内訳）</p> <p><input id="bonus" type="text" value="300">万円</p> <p>借入期間</p> <p><input id="period" type="text" value="30">年</p> <p>金利</p> <p><input id="rate" type="text" value="2.66">%</p> <p><button onclick="calcMonth()">試算する</button> <p>---</p> <p>月々 の 払い<input id="payM" type="text">円</p> <p>ボーナス払い<input id="payB" type="text">円</p> <p>一年間の返済総額<input id="payYear" type="text">円</p> <p>ご返済総額<input id="payTotal" type="text">円</p> <script type="text/javascript"> function $(id) { return document.getElementById(id); } function $F(id) { return parseFloat($(id).value); } function calcMonth() { var amount = 10000 * $F("amount"); var bonus = 10000 * $F("bonus"); var monthly = amount - bonus; var rate = $F("rate") / 100; var period = $F("period"); // 月々払いの計算 var kaisu = period * 12; var rate_mon = rate / 12; var bunsi = monthly * rate_mon * Math.pow((1 + rate_mon), kaisu); var bunbo = Math.pow((1 + rate_mon), kaisu) - 1; var payM = Math.floor(bunsi / bunbo); $("payM").value = insertComma(payM); // ボーナス払いの計算 var b_kaisu = period * 2; var rate_b = rate * 6 / 12; var b_bunsi = bonus * rate_b * Math.pow((1 + rate_b), b_kaisu); var b_bunbo = Math.pow(1 + rate_b, b_kaisu) - 1; var payB = Math.floor(b_bunsi / b_bunbo); $("payB").value = insertComma(payB); // 年間と総額の計算 var payYear = payM * 12 + payB * 2; var payTotal = payYear * period; $("payYear").value = insertComma(payYear); $("payTotal").value = insertComma(payTotal); } function insertComma(v) { v = "" + Math.floor(v); return v.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"); } </script> <p class="close btn-small">閉じる</p> </div> <script> $(function () { $('.loan-area-in').css("display", "none"); $('.loan-bt').on('click', function () { $(this).next().slideToggle(); $('.loan-bt').not($(this)).next('.loan-area-in').slideUp(); }) $('.close').on('click', function () { $(this).parent('.loan-area-in').slideUp(); }) }); </script> </div>
エラー内容
DevTools failed to load source map: Could not load content for http://○○○○.co.jp/wp-content/themes/○○○○/assets/js/swiper-bundle.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE slider-list.js:2 Uncaught TypeError: Cannot read properties of null (reading 'slick') at slider-list.js:2:17 (anonymous) @ slider-list.js:2 (index):690 Uncaught TypeError: Cannot read properties of null (reading 'ready') at (index):690:12 (anonymous) @ (index):690 DevTools failed to load source map: Could not load content for http://○○○○.co.jp/wp-content/themes/○○○○/assets/js/iscroll.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE jquery-3.5.1.js:1 jQuery.Deferred exception: Cannot read properties of null (reading 'width') TypeError: Cannot read properties of null (reading 'width') at imageSwitch (http://stg.○○○○.co.jp/wp-content/themes/○○○○/assets/js/change.js:9:41) at HTMLDocument.<anonymous> (http://○○○○.co.jp/wp-content/themes/○○○○/assets/js/change.js:19:3) at mightThrow (http://○○○○.co.jp/wp-content/themes/○○○○/assets/js/jquery-3.5.1.js:1:48585) at process (http://○○○○.co.jp/wp-content/themes/○○○○/assets/js/jquery-3.5.1.js:1:49240) undefined jQuery.Deferred.exceptionHook @ jquery-3.5.1.js:1 process @ jquery-3.5.1.js:1 setTimeout (async) (anonymous) @ jquery-3.5.1.js:1 fire @ jquery-3.5.1.js:1 fireWith @ jquery-3.5.1.js:1 fire @ jquery-3.5.1.js:1 fire @ jquery-3.5.1.js:1 fireWith @ jquery-3.5.1.js:1 ready @ jquery-3.5.1.js:1 completed @ jquery-3.5.1.js:1 jquery-3.5.1.js:1 Uncaught TypeError: Cannot read properties of null (reading 'width') at imageSwitch (change.js:9:41) at HTMLDocument.<anonymous> (change.js:19:3) at mightThrow (jquery-3.5.1.js:1:48585) at process (jquery-3.5.1.js:1:49240)
申し訳ございません。
エラーについて、クロムのデベロッパーツールの内容を記載しました。
こちらで大丈夫でしょうか？
>slider-list.js:2 Uncaught TypeError: Cannot read properties of null (reading 'slick')
at slider-list.js:2:17
このエラーメッセージでHTMLエレメントオブジェクトのプロパティがライブラリ上で参照できていないようです。
既に「m.ts10806」さんが示してくれた回答にありますが、jqueryの「$」が上書きされてしまって、ライブラリがjqueryの「$」を利用してHTMLエレメントオブジェクトを取得しようとした際、selectorを利用するため、例えば「slick」というIDで取得しようとした場合、ライブラリ上では「#slick」と指定しますが、実際は処理が上書きされてしまっているため、「document.getElementById('#slick')」というようになって、HTMLエレメントオブジェクトが取得できていないのかと思います。
頂いているご回答を参考にファンクション名を変更して試してみてください。
申し訳ございません、色々変更してみたのですが書き方が分かりませんでした。
Matsumon0104さんの、補足、すごくためになりました！
この場を借りまして、御礼申し上げます。
この度はありがとうございました。
Matsumon0104さん
補足ありがとうございます。
ただしくは「上書き」ですね。
後勝ちということで。
重複定義だと正しくないので回答修正しておきます。
回答1件
0
ベストアンサー
jQuery利用されているならそもそも$()はjQuery本体に定義されているため、同名関数が上書きされて存在しない要素を指すようになりnullを返してエラーになっていませんか？
※表現を修正。Matsumon0104さんありがとうございます。
ブラウザ開発ツールのコンソール確認してください。
slickはjQueryを利用したプラグインなのでjQueryのセレクタ指定が大量にされています。上書きれると要素が正しく取れなくなります。
ひとまず、自身が定義されているメソッド名を変更してください。
getElementById()固定ならそれなりの名前にしたほうが良いです。
$F()についても同様、紛らわしいので見直したほうが良さそうです。
投稿2022/09/08 06:15
編集2022/09/08 09:00総合スコア80850
ご回答ありがとうございます！
$(id)と$F(id)のid部分を変更すれば良いということでしょうか？
重ね重ねの質問になり申し訳ございません。
まずはエラーを確認してから。コメントで指摘されているように確認して質問本文にコピペを。
いずれにしても回答の通り、既に使われているメソッド名と重複していることが問題と思われるので、
別の名称に変更して、変更したら元々そのメソッド名を利用していた箇所も変更したメソッド名に変更してください。（組まれたご自身が最もよく知っていると思います）
先ほどクロムデベロッパーツール記載のエラー内容を追記ました。
お手数をおかけ致しますが、ご確認いただけますと幸いでございます。
メソッドの件は修正すべきとして、404結構ありますね。
ファイル一式アップロードされましたか？
今はテストサイトで試しているので、余計なファイルは入れてない状態です（汗）
細かいお気遣い、本当に恐れ入ります。
テストとはいえ、一式揃ってないと検証にはならないので、
プラグイン関連のファイルは余計ではないと思います。
404になっていた画像をアップして、エラーを修正しました。
お手数をおかけ致しますが、ご確認いただけますと幸いでございます。
宜しくお願いいたします。
コードの修正はされていませんか？変わってないように見受けられます。
function $(id) { return document.getElementById(id); }
function $F(id) { return parseFloat($(id).value); }
申し訳ございません、この部分の修正でしょうか？
はい。そもそもがそこが問題だというのが質問及び回答の当初の主旨ですよ。
function test(id) { return document.getElementById(id); }
function test02(id) { return parseFloat($(id).value); }
function calcMonth() {
var amount = 10000 * test02("amount");
var bonus = 10000 * test02("bonus");
var monthly = amount - bonus;
var rate = test02("rate") / 100;
var period = test02("period");
上記に変更したのですが、エラーは減りましたが動作しませんでした。
申し訳ございません、色々変更してみたのですが書き方が分かりませんでした。
質問本文のコード調整を。
ただ以下直ってません。
function test02(id) { return parseFloat($(id).value); }
$(id)
↓
test(id)
ただ、そもそもjQuery使える環境になっているなら、 test(id)は不要ではないかと。
function test02(id) { return parseFloat($(id).value); }
↓
function test02(id) { return parseFloat($("#"+id).val()); }
ありがとうございます！
ご指摘にならい、下記に修正しましたが、動きませんでした・・・。
自分の知識不足に涙が出てきます。
function test(id) { return document.getElementById(id); }
function test02(id) { return parseFloat($("#"+id).val()); }
function calcMonth() {
var amount = 10000 * test02("amount");
var bonus = 10000 * test02("bonus");
var monthly = amount - bonus;
var rate = test02("rate") / 100;
var period = test02("period");
「動かない」とは、何が起きてるのでしょう。
エラー確認してください。
最初とは状況変わってるはずです。
他にもtest()（元の$()）
参照していたり箇所は沢山あると思いますので、
一通り変更する必要があります。
$("payYear")
↓
test("payYear")
など。
もし test(id)をなくすなら
$("payYear").value
↓
$("#payYear").val("～～～～")
のように。
個人的にはjQueryとVanilla JSが混じるのはメンテナンス性の観点から避けたいので、
jQuery採用するなら要素の指定は全てjQueryのセレクタに併せます。
http://semooh.jp/jquery/api/selectors/
ありがとうございます！！！！！！！！
ご指摘の箇所＄をtestに変更したら動作しました（涙）
本当に、感謝しても仕切れません。
こんな素人にここまでの回答をいただき、本当にありがとうございました。
ひとまず、
＞もし test(id)をなくすなら
以下は後からでもできるので、メソッド名変更した後の影響箇所の対応優先で。
いえ、
ひとまずWordPressですかね。
「使うだけ」という人は結構いるので、コピペだけで済まそうとして詰まる人は多いです。
せめて自身が書いたコードが何してるかくらいは理解できるようになった方がいいですね。
アフターケアまでありがとうございました。
もっと勉強して修正していきたいと思います。
この度は本当にありがとうございました。
この場を借りて御礼申し上げます。
あなたの回答
tips
プレビュー
