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

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

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

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

解決済

function $(id) { return document.getElementById(id); }が問題でエラーを起こす

dethtroy
dethtroy

総合スコア44

JavaScript

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

1回答

0リアクション

0クリップ

268閲覧

投稿2022/09/08 06:08

編集2022/09/08 08:22

前提

ローンシミュレーターの組み込みをしていて、
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)

以下のような質問にはリアクションをつけましょう

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

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

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

Matsumon0104

2022/09/08 06:14

>エラーを起こす エラーは不具合発生個所を特定したり、対応を検討したりするための重要な情報です。 出力されているエラーを改変無く質問文に追記をお願いします。
dethtroy

2022/09/08 06:53

申し訳ございません。 エラーについて、クロムのデベロッパーツールの内容を記載しました。 こちらで大丈夫でしょうか?
Matsumon0104

2022/09/08 07:06

>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エレメントオブジェクトが取得できていないのかと思います。 頂いているご回答を参考にファンクション名を変更して試してみてください。
dethtroy

2022/09/08 07:41

申し訳ございません、色々変更してみたのですが書き方が分かりませんでした。
dethtroy

2022/09/08 08:44

Matsumon0104さんの、補足、すごくためになりました! この場を借りまして、御礼申し上げます。 この度はありがとうございました。
m.ts10806

2022/09/08 08:57

Matsumon0104さん  補足ありがとうございます。 ただしくは「上書き」ですね。 後勝ちということで。 重複定義だと正しくないので回答修正しておきます。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

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

JavaScript

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