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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

553閲覧

JavaScript / Jquery の addEventListener が 2回目押下後以降効かなくなる。

tetejiro

総合スコア17

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2023/03/05 05:39

実現したいこと

ナビボタンの実装で、選択したらその部分のセクションまでスクロールさせたいです。
以下のバグが起こっています。

1 回目のボタン押下:全て正常動作(スクロールする。)
2 回目のボタン押下(list-section2 以外のボタンを 2 回押下):正常動作(スクロールする。)
2 回目のボタン押下(list-section2 を 1 度押下し他のボタンを押下):list-section2 が 1度正常動作(スクロール)をした後に list-section2 含めボタン押下しても反応しなくなる。

イメージ説明

前提

  • 1 回目動作時点では問題ないのですが、 list-section2 を一度押下したあとの動作は全て、 addeventlistener の onclick が効かなくなっています。

  • list-section2 を押した後に、list-section3 を押下した際に、list-section3 の中の console.log が表示されなくなります。

  • list-section2 を 2 回押下した際に、list-section2 のconsole.log が全て表示されません。

発生している問題・エラーメッセージ

エラーが表示されるようなことはありませんでした。

該当のソースコード

JavaScript

1$(window).on('load', function(){ 2 3 $('.list-section1').on('click', function() { 4 // 該当のポイントまで遷移させる 5 scrollTo(0, 50); 6 // 該当のナビの下線を付ける 7 $('li').css('border-bottom', 'white solid 2px'); 8 // 該当のナビの以降の下線を外す 9 $('li').each(function(idx, val) { 10 if(idx > 0) { 11 val.style.border = 'none'; 12 } 13 }); 14 15 console.log(window.pageYOffset); 16 17 }); 18 19 $('.list-section2').on('click', function() { 20 console.log('2-1'); 21 scrollTo(0, 750); 22 $('li').css('border-bottom', 'white solid 2px'); 23 $('li').each(function(idx, val) { 24 if(idx > 1) { 25 val.style.border = 'none'; 26 } 27 }); 28 console.log('2-2'); 29 30 console.log(window.pageYOffset); 31 console.log('2-3'); 32 33 }); 34 35 $('.list-section3').on('click', function() { 36 console.log('3-1'); 37 38 scrollTo(0, 1300); 39 console.log('3-2'); 40 41 $('li').css('border-bottom', 'white solid 2px'); 42 $('li').each(function(idx, val) { 43 if(idx > 2) { 44 val.style.border = 'none'; 45 } 46 }); 47 console.log('3-3'); 48 49 console.log(window.pageYOffset); 50 51 }); 52 53 $('.list-section4').on('click', function() { 54 scrollTo(0, 1960); 55 $('li').css('border-bottom', 'white solid 2px'); 56 $('li').each(function(idx, val) { 57 if(idx > 3) { 58 val.style.border = 'none'; 59 } 60 }); 61 62 console.log(window.pageYOffset); 63 64 }); 65 66 $('.list-section5').on('click', function() { 67 scrollTo(0, 2800); 68 $('li').css('border-bottom', 'white solid 2px'); 69 $('li').each(function(idx, val) { 70 if(idx > 4) { 71 val.style.border = 'none'; 72 } 73 }); 74 75 console.log(window.pageYOffset); 76 77 }); 78}); 79

html

1 <nav> 2 <ul> 3 <li class="list-section1">ホーム</li> 4 <li class="list-section2">自己紹介</li> 5 <li class="list-section3">経験言語</li> 6 <li class="list-section4">Works</li> 7 <li class="list-section5">Contact</li> 8 </ul> 9 </nav> 10

試したこと

$('.list-section2').on('click', function() {
}
の処理の中身全て(JavaScript 20 ~ 31 行目)をコメントアウトしたところ、list-section2 を押下後も、他のボタンは反応するようになりました。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2023/03/05 06:03

ブラウザのディベロッパーツールを使ってデバッグしてみましたか? ブレークポイントを適当な場所に置いてステップ実行して期待通りのステップで進むか、変数の中身は期待通りかとか。
tetejiro

2023/03/05 07:56

>ブレークポイントを適当な場所に置いてステップ実行して期待通りのステップで進むか、変数の中身は期待通りかとか。 仕込んでいる console.log は該当しますでしょうか? すみませんが、他に仕込むものが思いつかず、具体的な例などを教えていただけますと嬉しいです。 お手数をおかけしますが、どうぞよろしくお願いします。
guest

回答2

0

もう少し共通化する意識を持ったほうが良いと思います

javascript

1<script> 2$(function(){ 3 var list_y=[100,200,300,400,500]; 4 $('.list-section').on('click', function() { 5 var idx=$('.list-section').index($(this)); 6 scrollTo(0, list_y[idx]); 7 $('.list-section').css({'border-bottom':'solid 0px'}); 8 $(this).css({'border-bottom':'solid 2px'}); 9 }); 10}); 11</script> 12<nav> 13 <ul> 14 <li class="list-section">ホーム</li> 15 <li class="list-section">自己紹介</li> 16 <li class="list-section">経験言語</li> 17 <li class="list-section">Works</li> 18 <li class="list-section">Contact</li> 19 </ul> 20 </nav> 21<div>

※実際にはスクロール位置は数値ではなく移動したいエリアを指定するべきです

投稿2023/03/05 06:19

yambejp

総合スコア115245

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tetejiro

2023/03/05 07:53

ご回答いただき誠にありがとうございます。 >共通化させる意識を持つべき ご指摘いただきありがとうございます。 おっしゃる通りですね。 いただきましたコードで試してみました。 しかし、動作が変わりがなく未だバグが解消されていない状態です。 私の方でも、コードを以下に変えてみました。 結果は同様で、バグがそのまま出現してしまっております。 (自己紹介ボタンを押下後、ボタンが効かなくなる。) もし他にお心当たりがございましたら、ご回答いただけますと 大変嬉しいです。どうぞよろしくお願いします。 $(window).on('load', function(){ let list_y = [50, 750, 1300, 1960, 2800]; $.each($('.list-section'), (idx) => { document.querySelectorAll('.list-section')[idx].addEventListener('click', function() { //$('.list-section').on('click' ~ だとなぜかエラー scrollTo(0, list_y[idx]); }); }); }); ※スクロール位置のエリアでの指定はこちらのバグ修正後対応したいと思います。 ご指摘ありがとうございます。 また、下線処理も同様にいったん後回しにしたいと思います。
guest

0

自己解決

すみませんが、こちら私の CSS の記載が誤っていたためでした。

※バグの該当部分のみ、ナビ部分にpadding がかぶってしまっているため、
ボタンが押下できなくなっていました。

投稿2023/03/05 12:41

tetejiro

総合スコア17

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問