メモ帳(ラジオ式)
ラジオボタン式のメモ帳を作成しました。
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);
});
ラジオボタンで選択された値を下に追加する!
この記事が気に入ったらサポートをしてみませんか?