0
0

(1冊ですべて身につく)カラーピッカーを作成する カラーコードを表示する

Posted at

お疲れ様です。

昨日の続きから進めていきます。
昨日の時点では、カラーピッカーで適当に色を選択してもカラーコードは変化しませんでしたが、今日はカラーコードが表示されるようにしました。

107.png

108.png

id名 ColorPicker から値(value)を取得し、それを表示。(2枚目の画像)
ただ、毎回 document.querySelector.....と書いていては、最終的にコードが長くなっていって、タイプミスもするし、大変になってくるので、値を取得したコード達をそれぞれ定数宣言し、コンパクトにまとめる。とのことです。

111.png

112.png

addEventlistener という、ユーザーの操作(クリック、マウス移動など)に応じて特定の関数を実行するメソッドを用いて、カラーピッカーで色が選択されたら、 colorBg (#ColorPickerの値を取得する)を実行するようにコードを書くと、最後の画像のように適当に選んだ色の、カラーコードが表示されました!

今後は背景色も、カラーピッカーで選ばれた色が反映されるように設定していく予定です。
基本的な内容が多いところかと思いますが、こういったところをちゃんと分かっていないと後々大変だと思うので、何度でも読み返してしっかり理解していきたいところです:writing_hand:

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0