チェックボックスを操作してみよう

チェックボックスで選択された値を使って要素を作成、DOMツリーに追加していきます。

• checked属性の操作
• 配列の文字列表現

checked属性の操作

・チェックボックスでも同じようにチェックされた要素をリストに追加していく命令を書いていきます。

・HTMLにはチェックボックスを、バリューにはそれぞれ表示したい色を書いておき、ボタンとリストのulを書いておきます。

配列の文字列表現

・JavaScriptの方ではまずquerySelectorAll()を使ってデータを取得します。そしてチェックボックスの場合は複数選択可なので選択された値を配列で保持できるようにしておきます。

・constで宣言すればおkです。これは配列の内容は変わりますが再代入されることはないからです。

・ループは、checkedプロパティで調べれるのでforEach()で書いていきます。選択された値を追加していきたいのでpush()を使って予め決めておいた追加する文字のvalueを書いていきます。

・あとは前回と同じようにli要素を作ってDOMツリーに追加していきます。li 要素の textContent ですが、 selectedColors の配列の要素をjoinを使って , （カンマ）区切りで設定してあげましょう。

・あとはulのidに対してliをアペンドチャイルドで追加してあげればおkです。

・ただ、配列は文字列で表現されるときに , 区切りになるので、 , 区切りの場合だったらjoin() を書かなくてもおｋです。