同じイベントを実行させる変数の入力を簡略化するには？

ランチA　をクリックすると　＞　やきにく定食が表示＋ボタンの背景が黄色
ランチB　をクリックすると　＞　とんかつ定食が表示＋ボタンの背景が黄色
ランチC　をクリックすると　＞　焼肉定食が表示＋ボタンの背景が黄色
＊ただし、定食名は一つしか表示しない。また表示されている以外のボタンの背景色はグレー　とする。

以下のコードで実行されますが、ボタン数が増えるとコード数が膨大になります。
同じイベントの変数について簡略化する方法をご教示ください。

    <button id='lunch_a'>ランチA</button>
    <button id="lunch_b">ランチB</button>
    <button id="lunch_c">ランチC</button>
    <p id="yakiniku" style="display:none">やきにく定食</p>
    <p id="tonkatsu" style="display:none">とんかつ定食</p>
    <p id="sashimi" style="display:none">刺身定食</p>
    
     <script>
    var lunch_a = document.getElementById('lunch_a');
    var lunch_b = document.getElementById('lunch_b');
    var lunch_c = document.getElementById('lunch_c');
    var yakiniku = document.getElementById('yakiniku');
    var tonkatsu = document.getElementById('tonkatsu');
    var sashimi = document.getElementById('sashimi');
        
     lunch_a.addEventListener('click', function() {
         yakiniku.style.display = 'block';
         lunch_a.style.backgroundColor = 'yellow';
         tonkatsu.style.display = 'none';
         lunch_b.style.backgroundColor = 'grey'
         sashimi.style.display = 'none';
         lunch_c.style.backgroundColor = 'grey'
     });
         
     lunch_b.addEventListener('click', function() {
         tonkatsu.style.display = 'block';
         lunch_b.style.backgroundColor = 'yellow';
         yakiniku.style.display = 'none';
         lunch_a.style.backgroundColor = 'grey'
         sashimi.style.display = 'none';
         lunch_c.style.backgroundColor = 'grey'
     });
         
    lunch_c.addEventListener('click', function() {
         sashimi.style.display = 'block';
         lunch_c.style.backgroundColor = 'yellow';
         yakiniku.style.display = 'none';
         lunch_a.style.backgroundColor = 'grey'
         tonkatsu.style.display = 'none';
         lunch_b.style.backgroundColor = 'grey'
     });
         
    </script>コード

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

回答3件

ベストアンサー

自分がやるとしたら下記のようにします。
idではなくclassを使ってのループ処理

html+Javascript

<body>
        <button class="lunch">ランチA</button>
        <button class="lunch">ランチB</button>
        <button class="lunch">ランチC</button>
        <p class="menu" style="display:none">やきにく定食</p>
        <p class="menu" style="display:none">とんかつ定食</p>
        <p class="menu" style="display:none">刺身定食</p>

<script>
    const lunch = document.getElementsByClassName("lunch");
    const menu = document.getElementsByClassName("menu");

    for(let i = 0; i <lunch.length ; i++) {
    lunch[i].addEventListener("click", (e) => {
        for(let i = 0; i < lunch.length; i++) {
            menu[i].style.display = "none";
            lunch[i].style.backgroundColor = "grey";
        }
        menu[i].style = "display:block";
        lunch[i].style.backgroundColor = "yellow";
    });
    }

</script>
</body>

投稿2021/05/09 10:07

Jon_do

総合スコア1373

makosama4493

2021/05/10 00:14

javascript初心者のわたしには理解しやすいコードでした。ありがとうございました。

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

表示はcssにまかせ、クラスの付替えで処理するとよいでしょう
ボタンと表示領域の紐付けはカスタムデータを利用すると効率的です。

javascript
1<style>
2.view:not(.active){
3display:none;
4}
5.btn.active{
6  background-Color:yellow;
7}
8</style>
9<script>
10window.addEventListener('DOMContentLoaded', ()=>{
11  document.querySelectorAll('.btn').forEach(x=>{
12    x.addEventListener('click',()=>{
13      document.querySelector('.btn.active')?.classList.remove('active');
14      document.querySelector('.view.active')?.classList.remove('active');
15      x.classList.add('active');
16      document.querySelector(x.dataset.target).classList.add('active');
17    });
18  });
19});
20</script>
21<button id="lunch_a" class="btn" data-target="#yakiniku">ランチA</button>
22<button id="lunch_b" class="btn" data-target="#tonkatsu">ランチB</button>
23<button id="lunch_c" class="btn" data-target="#sashimi">ランチC</button>
24<p id="yakiniku" class="view">やきにく定食</p>
25<p id="tonkatsu" class="view">とんかつ定食</p>
26<p id="sashimi" class="view">刺身定食</p>

投稿2021/05/09 08:24

yambejp

総合スコア116724

makosama4493

2021/05/10 00:16

うまく実行できました。ありがとうございました。一読jして理解できないため復習します。勉強になります。

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

もっといい方法はあると思いますがとりあえず回答します

html
1<body>
2    <div id="root"></div>
3<script>
4    const textPairs = [
5        ["a", [
6            "yakiniku",
7            "焼肉定食"
8        ]],
9        ["b", [
10            "tonkatsu",
11            "とんかつ定食"
12        ]],
13        ["c", [
14            "sashimi",
15            "刺身定食"
16        ]]
17    ];
18　　//要素の生成
19    const elmPairs = {}
20    const buttons = [];
21    const pList= [];
22    for(const Pair of textPairs){
23        const button = document.createElement("button");
24        button.id = `lunch_${Pair[0]}`;
25        button.innerText = `ランチ${Pair[0].toUpperCase()}`
26        const p = document.createElement("p");
27        p.id = Pair[1][0];
28        p.style.display = "none";
29        p.innerText = Pair[1][1]
30        elmPairs[Pair[1][0]] = {button, p};
31        buttons.push(button);
32        pList.push(p);
33    }
34    const root = document.getElementById("root");
35    buttons.forEach(b=>root.appendChild(b));
36    pList.forEach(p=>root.appendChild(p))
37    
38    //イベントリスナーの登録
39    for(const elm in elmPairs){
40        elmPairs[elm].button.addEventListener("click",()=>{
41            for(const elm_ in elmPairs){
42                if( elm_ === elm ){
43                    elmPairs[elm_].p.style.display = "block";
44                    elmPairs[elm_].button.style.backgroundColor = "yellow";
45                } else {
46                    elmPairs[elm_].p.style.display = "none";
47                    elmPairs[elm_].button.style.backgroundColor = "grey";
48                }
49            }
50        })
51    }
52</script>
53</body>

追記

ほかに邪魔する要素がないと仮定すればこうできます

html
1const root = document;//.getElementById("親のID");
2const buttons = root.getElementsByTagName("button");
3const pList= root.getElementsByTagName("p");
4console.assert(pList.length === buttons.length);
5for(let i=0; i<buttons.length; i++){
6    buttons[i].addEventListener("click",()=>{
7        for(let j=0; j<buttons.length; j++){
8            if(j === i){
9                pList[j].style.display = "block";
10                buttons[j].style.backgroundColor = "yellow";
11            }else{
12                pList[j].style.display = "none"
13                buttons[j].style.backgroundColor = "grey";
14            }
15        }
16    });
17}