複数オブジェクトは下のように 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>