メモ帳（ラジオ式）

ラジオボタン式のメモ帳を作成しました。

HTMLコード

  <fieldset>
   <legend>好きな食べ物</legend>
    <input type="radio"  value="焼肉">焼肉
    <input type="radio"  value="寿司">寿司
    <input type="radio"  value="てんぷら">てんぷら
    <button>追加</button>
 </fieldset>

 <ul>
 </ul>

JSコード

  document.querySelector('button').addEventListener('click', () => {
   const eats = document.querySelectorAll("input");　　⇒　ラジオはまとまってないので全ての要素を取得
   let selectedEat;　　　　　　　　　　　　　　　　　　　　⇒　選択された値を保持するための変数名を取得
　
   eats.forEach(eat => {　　　　　　　　　　⇒　eatのループ処理をするためにEach文法を使用
     if (eat.checked === true) {　　　　　⇒　選択された値
       selectedEat = eat.value;　　　　　⇒　選択された値を代入
     }
   });


   const li = document.createElement("li");　　　　⇒　li要素を作成
   li.textContent = selectedEat;　　　　　　　　　　⇒　liの記入される要素
   document.querySelector("ul").appendChild(li);
 });

ラジオボタンで選択された値を下に追加する！