JavaScript: getElementById()でIDを複数指定したい

Question

前提・実現したいこと

JS初心者です。
JSでidを複数取得しclickBtnで表示の出しわけをしたいです。
書き方がいまいちわからない状態で機能しません…

該当のソースコード

// HTML
<a href="#">
 <div onclick="clickBtn1()">
  <img src="button01img.png" alt="01">
 </div>
</a>

<a href="#">
 <div onclick="clickBtn2()">
  <img src="button02img.png" alt="02">
 </div>
</a>

以下省略

<div id="id-1">
 <img src="/assets/img/img-01.png">
</div>

<div id="id-2">
 <img src="/assets/img/img-02.png">
</div>

<div id="id-3">
 <img src="/assets/img/img-03.png">
</div>

<div id="id-4">
 <img src="/assets/img/img-04.png">
</div>

<div id="id-5">
 <img src="/assets/img/img-05.png">
</div>

以下省略

// 複数のid名で一括取得
function getElements(){
	
	let elem = {};
	let elements = {};
	let id = '';
	
	// 引数の数だけループ
	for (let i = 0; i < arguments.length; i++){
		id = arguments[i];
		elem = document.getElementById(id);
		
		// id名が定義されている場合のみ、elementsに追加
		if (elem != null){
			elements[id] = elem;
		}
	}
	return elements;
}

document.getElements('id-1','id-2','id-3').style.display ="none";
function clickBtn1(){
	const p1 = document.getElements('id-1','id-2','id-3');
	if(p1.style.display=="block"){
		p1.style.display ="none";
	}else{
		p1.style.display ="block";
	}
}

// ひとつのid名で取得は下記でできています。
複数取得したいのです
document.getElementById("id-1").style.display ="none";
function clickBtn1(){
	const p1 = document.getElementById("id-1");
	if(p1.style.display=="block"){
		p1.style.display ="none";
	}else{
		p1.style.display ="block";
	}
}

Comments

[yambejp]

仕様があいまい
p1,p2,p3というidがついたHTML要素に対してクリックしたら非表示にするとして
非表示のものはクリックできないから表示はできないですが？

[bio_kozy]

ご親切に回答ありがとうございます。
まだ仕様も曖昧でクライアントと相談しでなおします。
ありがとうございました

Answer 1

希望する挙動が不明確なので要素の掴み方だけ

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelectorAll('#p1,#p2,#p3').forEach(x=>{
    x.addEventListener('click',()=>{
      console.log(x.id);
    });
  });
});
</script>
<div id="p1">p1</div>
<div id="p2">p2</div>
<div id="p3">p3</div>

クリックする要素と表示を切り替える要素が違うのですね

<script>
document.addEventListener('click',e=>{
  if(e.target.closest('[data-target]')){
    document.querySelectorAll(e.target.dataset.target).forEach(x=>{
      x.toggleAttribute('hidden');
    });
  }
});
</script>
<div data-target="#p1,#p2,#p3">1,2,3</div>
<div data-target="#p4,#p5">4,5</div>
<div id="p1">p1</div>
<div id="p2">p2</div>
<div id="p3">p3</div>
<div id="p4">p4</div>
<div id="p5">p5</div>

Comments

[bio_kozy]

ご回答ありがとうございます。orz

Answer 2

getElements() が返すのは id名:idが指す要素 のオブジェクトですから、p1.style という形でスタイルにアクセスすることはできません。ループが必要です。

document.getElements('p1','p2','p3').style.display ="none";
↓
for (let e of Object.values(document.getElements('p1','p2','p3')))
    e.style.display = "none";

    if(p1.style.display=="block"){
        p1.style.display ="none";
    }else{
        p1.style.display ="block";
    }

↓
    for (let e of Object.values(p1)) {
        if (e.style.display == "block") {
            e.style.display = "none";
        } else {
            e.style.display = "block";
        }
    }

---

常套手段は、

• <div id="id-N"> に共通のクラスを付ける。初期状態が非表示なら、それを示すクラスも付ける。例: <div class="image-container hidden">
• 表示状態はCSSで制御する。例: .hidden { display: none; }
• clickBtn1() は以下のようにhiddenクラスを付け外しする

    for (let c of document.querySelectorAll('.image-container')) {
      c.classList.toggle('hidden');
    }

Comments

[bio_kozy]

まだ、解決になっていないのですが、クライアントの仕様が２点３点変更になりましたので出直します。
ご回答ありがとうございます。