複数オブジェクトにクラスを付与したい

下記コードの.btnをクリックしたときに、.btnと.aに.hiddenを付与したいです。
現状では複数オブジェクトの指定方法がわからず、　.aのみに.hiddenが付与される書き方をしてしまっています。
複数オブジェクトの指定方法をご教授いただけますと幸いです。
よろしくお願いいたします。

html
1<div class="a"></div>
2<div class="button">ボタン</div>

javascript
1const a = document.getElementsByClassName('a')[0];
2const btn = document.getElementsByClassName('button')[0];
3
4btn.addEventListener('click', event => {
5    a.classList.toggle('hidden');
6});

yambejp

2020/11/04 09:21

複数オブジェクトの具体的な例をあげてください

think49

2020/11/04 23:18

> .btnと.aに.hiddenを付与したいです。条件はそれだけですか。「全ての.btnと.a」を対象とするなら、既存の回答で解決出来ます。

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

回答2件

ベストアンサー

複数オブジェクトは下のように div と button が複数あるものと推測しました。

ボタンの役割をするタグにdivは不適格だと思いましたのでbuttonに変えてます。

html
1<div class="a toggleTarget"></div>
2<div class="a toggleTarget"></div>
3<div class="a toggleTarget"></div>
4<button type="button" class="button toggleTarget">ボタン</button>
5<button type="button" class="button toggleTarget">ボタン</button>

下記コードの.btnをクリックしたときに、.btnと.aに.hiddenを付与したいです。
.aのみに.hiddenが付与される

ここはbuttonをクリックしたら class="a" と class="button" が含まれる要素全てに
class="hidden"を付与したいという意味だと推測しました。

それをまとめたものが下のコードです。

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>test</title>
8    <style>
9        div {
10            width: 100px;
11            height: 100px;
12            background-color: aqua;
13            float: left;
14            margin: 0 20px;
15        }
16
17        .button {
18            display: block;
19            margin-bottom: 10px;
20        }
21
22        .hidden {
23            display: none;
24        }
25    </style>
26</head>
27
28<body>
29    <div class="a toggleTarget"></div>
30    <div class="a toggleTarget"></div>
31    <div class="a toggleTarget"></div>
32    <button type="button" class="button toggleTarget">ボタン1</button>
33    <button type="button" class="button toggleTarget">ボタン2</button>
34    <button id="button3" type="button">ボタン3</button>
35    <script>
36
37        const btn = document.getElementsByClassName("button");
38        const target = document.getElementsByClassName("toggleTarget");
39
40        for (let b = 0; b < btn.length; b++) {
41            btn[b].addEventListener("click", () => {
42                for (let t = 0; t < target.length; t++) {
43                    target[t].classList.add("hidden");
44                }
45            });
46        }
47
48        const btn3 = document.getElementById("button3");
49
50        btn3.addEventListener("click", () => {
51            for (let t = 0; t < target.length; t++) {
52                target[t].classList.toggle("hidden");
53            }
54        });
55
56    </script>
57</body>
58
59</html>

投稿2020/11/04 13:30

Jon_do

総合スコア1373

javascript
1btn.addEventListener('click', event => {
2  a.classList.toggle('hidden');
3  btn.classList.toggle('hidden');
4});

か、

html
1<div class="a toggleTarget"></div>
2<div class="button toggleTarget">ボタン</div>
3
4<script>
5const a = document.getElementsByClassName('a')[0];
6const btn = document.getElementsByClassName('button')[0];
7const toggleTarget = document.getElementsByClassName('toggleTarget');
8
9btn.addEventListener('click', event => {
10  [].forEach.call(toggleTarget, elm => {
11    elm.classList.toggle('hidden');
12  });
13});
14</script>