JSでラジオボタンを使用して「display:none;」と「display:block;」の出しわけをしたい

実現したいこと

JSでラジオボタンを使用して、●を押下されたら①②を表示、★を押下されたら③④を表示としたいです。

＜条件＞
●を押下後、★を押下すると①②非表示にして、③④を表示。
★を押下後、●を押下すると③④非表示にして、①②を表示。

現状デフォルトで①ー④を表示するtest1とtest2はdisplay:none;で非表示としています。
●buttonClick()にてクリックされたらdisplay:none;を削除、display:block;を追加とすればいいのかなと検討していますが、そうすると●を押下した後、★を押下すると①ー④全てが表示されることとなってしまいます。。

上記＜条件＞のようにするにはどのように実装すればよろしいでしょうか。
知識が浅く大変申し訳ございませんが、分かるかたいらっしゃましたらお力添えを頂きたいです。

以上、よろしくお願い致します。

該当のソースコード

html
1<ul class="center">
2  <li><input type="rabio" name="radio" value="1" onclick="buttonClick1()">●</li>
3  <li><input type="rabio" name="radio" value="1" onclick="buttonClick2()">★</li>
4</ul>
5<ul id="test1" style="display: none;">
6  <li>
7    <button>①</button>
8    <button>②</button>
9  </li>
10</ul>
11
12<ul id="test2" style="display: none;">
13  <li>
14    <button>③</button>
15    <button>④</button>
16  </li>
17</ul>

css
1.center{
2    display: flex;
3    justify-content: center;
4    align-items: center;
5}

js
1function buttonClick1(){
2    let test1 = document.getElementById("test1");
3
4    if(test1.style.display="none"){
5        test1.style.display="block";
6    }
7}
8
9function buttonClick2(){
10    let test2 = document.getElementById("test2");
11
12    if(test2.style.display="none"){
13        test2.style.display="block";
14    }
15}

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

回答1件

ベストアンサー

いろいろ書き方はありそうですが、とりあえず

javascript
1<script>
2document.addEventListener('change',e=>{
3  const t=e.target;
4  if(t.matches('[name=radio]')){
5    const v=t.value;
6    test1.style.display=v=="1"?"initial":"none";
7    test2.style.display=v=="2"?"initial":"none";
8    test3.style.display=v=="3"?"initial":"none";
9  }
10});
11</script>
12<ul class="center">
13  <li><label><input type="radio" name="radio" value="1">●</label></li>
14  <li><label><input type="radio" name="radio" value="2">★</label></li>
15  <li><label><input type="radio" name="radio" value="3">■</label></li>
16</ul>
17<ul id="test1" style="display: none;">
18  <li>
19    <button>①</button>
20    <button>②</button>
21  </li>
22</ul>
23
24<ul id="test2" style="display: none;">
25  <li>
26    <button>③</button>
27    <button>④</button>
28  </li>
29</ul>
30
31<ul id="test3" style="display: none;">
32  <li>
33    <button>⑤</button>
34    <button>⑥</button>
35  </li>
36</ul>
37