HTMLのclassをJavaScriptで1つずつずらしたい

HTMLのclass="btn1"などで1つ1つの値を取ってきて書くのは冗長なので短く書きたいのです。
ちなみに、以下のようなJavaScriptのコードで試すと、やはり構文エラーなので他にやり方を知っている方がいれば教えて欲しいです。

HTML
1<div class="container">
2          <button type="button" class="buttons btn1">家賃<br>
3            <span class="cost1">80,000</span><span>円</span>
4          </button>
5          <button type="button" class="buttons btn2">光熱費<br>
6            <div class="cost2">5,000<span>円</span></div>
7          </button>
8          <button type="button" class="buttons btn3">水道代<br>
9            <div class="cost">5,000<span>円</span></div>
10          </button>
11          <button type="button" class="buttons btn4">通信費<br>
12            <div class="cost">5,000<span>円</span></div>
13          </button>
14          <button type="button" class="buttons btn5">食費<br>
15            <div class="cost">40,000<span>円</span></div>
16          </button>
17          <button type="button" class="buttons btn6">音楽<br>
18            <div class="cost">1,000<span>円</span></div>
19          </button>
20          <button type="button" class="buttons btn7">動画<br>
21            <div class="cost">2,000<span>円</span></div>
22          </button>
23          <button type="button" class="buttons btn8">Offce関連<br>
24            <div class="cost">1,000円</div>
25          </button>

JavaScript
1// ボタンが押された場合にCSSを変更する
2function ClickChange() {
3    for (let i = 1; i < 9; i++) {
4        let btn${i} = document.querySelector('.btn${i}');
5        btn${i}.addEventListener('click', () => {
6            btn${i}.classList.toggle('clicked');
7        });
8    } 
9    // let btn1 = document.querySelector('.btn1');
10    // btn1.addEventListener('click', () => {
11    //     btn1.classList.toggle('clicked');
12    // });
13    // let btn2 = document.querySelector('.btn2');
14    // btn2.addEventListener('click', () => {
15    //     btn2.classList.toggle('clicked');
16    // });
17    // let btn3 = document.querySelector('.btn3');
18    // btn3.addEventListener('click', () => {
19    //     btn3.classList.toggle('clicked');
20    // });
21    // let btn4 = document.querySelector('.btn4');
22    // btn4.addEventListener('click', () => {
23    //     btn4.classList.toggle('clicked');
24    // });
25    // let btn5 = document.querySelector('.btn5');
26    // btn5.addEventListener('click', () => {
27    //     btn5.classList.toggle('clicked');
28    // });
29    // let btn6 = document.querySelector('.btn6');
30    // btn6.addEventListener('click', () => {
31    //     btn6.classList.toggle('clicked');
32    // });
33    // let btn7 = document.querySelector('.btn7');
34    // btn7.addEventListener('click', () => {
35    //     btn7.classList.toggle('clicked');
36    // });
37    // let btn8 = document.querySelector('.btn8');
38    // btn8.addEventListener('click', () => {
39    //     btn8.classList.toggle('clicked');
40    // });
41}
42ClickChange();

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

回答1件

ベストアンサー

下記のような感じで大丈夫だと思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <style>
9        .clicked {
10            background-color: pink;
11        }
12    </style>
13</head>
14
15<body>
16    <div class="container">
17        <button type="button" class="buttons">家賃<br>
18            <span class="cost1">80,000</span><span>円</span>
19        </button>
20        <button type="button" class="buttons">光熱費<br>
21            <span class="cost2">5,000<span>円</span></span>
22        </button>
23        <button type="button" class="buttons">水道代<br>
24            <span class="cost">5,000<span>円</span></span>
25        </button>
26        <button type="button" class="buttons">通信費<br>
27            <span class="cost">5,000<span>円</span></span>
28        </button>
29        <button type="button" class="buttons">食費<br>
30            <span class="cost">40,000<span>円</span></span>
31        </button>
32        <button type="button" class="buttons">音楽<br>
33            <span class="cost">1,000<span>円</span></span>
34        </button>
35        <button type="button" class="buttons">動画<br>
36            <span class="cost">2,000<span>円</span></span>
37        </button>
38        <button type="button" class="buttons">Office関連<br>
39            <span class="cost">1,000円</span>
40        </button>
41    </div>
42    <script>
43        // ボタンが押された場合にCSSを変更する
44        const btn = document.getElementsByClassName("buttons");
45        for (let i = 0; i < 8; i++) {
46            btn[i].addEventListener('click', () => {
47                btn[i].classList.toggle('clicked');
48            });
49        }
50    </script>
51</body>
52
53</html>