javascriptにてボタンタグの作動について

前提・実現したいこと

javascriptでボタンタグにて動くスライドメニューを二つ作成したい。

一つのファイル内に、2箇所同じスライドメニューを作りました。
結果一つ目は動き、二つ目は動きません。
スライドは実装できているのですが、ボタンが動かない状況です。

下記のコードなのですが、id,classは一緒にしてありcssも効いています。
ただclass rightの方がボタンを押しても動きません。

お分かりの方、宜しくお願い致します。

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

エラーメッセージはありません。

該当のソースコード

<html> <div class="left"> <div class="button"> <button type="button" id="left"><</button> <button type="button" id="right">></button> </div> <div id="scrollArea"> <div id="inner"> <div class="gift"> </div> <div class="gift"> </div> <div class="gift"> </div> <div class="gift"> </div> <div class="gift"> </div> <div class="gift"> </div> <div class="gift"> </div> <div class="gift"> </div> <div class="gift"> </div> <div class="gift"> </div> <div class="gift"> </div> <div class="gift"> </div> <div class="gift"> </div> </div> </div> </div> <div class="right"> <div class="button"> <button type="button" id="left"><</button> <button type="button" id="right">></button> </div> <div id="scrollArea"> <div id="inner"> <div class="gift"> <p></p> </div> <div class="gift"> <p>2歳以上のお子様に、幼児ポピーのお試しセットを無料でもらおう</p> </div> <div class="gift"> <p></p> </div> <div class="gift"> <p></p> </div> <div class="gift"> <p></p> </div> <div class="gift"> <p></p> </div> <div class="gift"> <p></p> </div> <div class="gift"> <p></p> </div> <div class="gift"> <p></p> </div> <div class="gift"> <p></p> </div> <div class="gift"> </div> </div> </div> </div>

＜script>
$(function(){
$("#scrollArea").scroll(function(){
$("#out").text("scrollLeft:"+$(this).scrollLeft())
})
$("#right").click(function(){
$("#scrollArea").animate(
{
scrollLeft:$("#scrollArea").scrollLeft()+500,
},
300
)
return false
})
$("#left").click(function(){
$("#scrollArea").animate(
{
scrollLeft:$("#scrollArea").scrollLeft()-500,
},
300
)
return false
})
})

m.ts10806

2021/04/16 02:42

コードはマークダウンのcode機能にてご提示ください

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

回答1件

ベストアンサー

理想の動きがどういうものかわかりませんが、とりあえずidは１つしか使えませんのでclassを使いましょう。

id="right"とid="left"はすべて
class="right"とclass="left"にしてください。

例えば以下試して頂きたいのですが「box1-1」をクリックしたときしか動きません。

<html>
  <head>
    <script>
    $(function(){
      $("#box1").click(function(){
        console.log('#box1をクリックしました');
      });
    });
    </script>
  </head>
  <body>
    <button typr="button" id="box1">box1-1</button>
    <button typr="button" id="box1">box1-2</button>
  </body>
</html>

しかし次のようにすれば動きます。

html
1<html>
2  <head>
3    <script>
4    $(function(){
5      $(".box1").click(function(){
6        console.log('.box1をクリックしました');
7      });
8    });
9    </script>
10  </head>
11  <body>
12    <button typr="button" class="box1">box1-1</button>
13    <button typr="button" class="box1">box1-2</button>
14  </body>
15</html>