目次
ラジオボタンで選択された値を使って要素を作成、DOMツリーに追加していきます。
- checked属性の操作
checked属性の操作
・今回はラジオボタンでチェックされている要素をリストに追加していく命令を書いていきます。
・HTMLはinputタグにタイプをラジオボタンnameにカラーをバリューにはそれぞれ表示したい色を書いておき、ボタンとリストのulを書いてid属性を付けておきます。
・JavaScriptの方ではまずはインプットを取得したいのですがselect のようにまとまっていないので、 querySelectorAll() を使って全ての input 要素を取得してあげる必要があります。
・複数の要素を取得するので、定数名は colors とわかりやすく複数形にしておきます。選択された値を保持しておきたいので変数も宣言しておきます。
・ colors に対してループ処理をしていきます。forEach() を使ってあげましょう。要素がチェックされていたら、その値を selectedColor に代入してあげれば良いです。
・checked プロパティで調べられるので、 checked プロパティが true だったら、 selectedColor にその color の value プロパティの値を代入してあげましょう。
・あとはli 要素を作って追加します。まずは createElement() で li 要素を作ってあげます。そのうえで li.textContent には選択された値を入れたいので、 selectedColor を代入してあげましょう。
・最後にulのidに対して li を appendChild() してあげれば良いでしょう。
