CodeDrill
day_streak: --
← 問題一覧に戻る
JavaScript ・ フォーム

問題69: 選んだ色を四角に反映する

セレクトボックス #colorSelect で色を選ぶと、四角 #colorBox背景色が選んだ色になるようにしてください。changeイベントを使います。

今回鍛える力

入力を伝える

身につく力

  • イベント種類を指定
  • 値の反映を明記する
  • 対象要素を明確化

AIへの頼み方のヒント

セレクトボックス#colorSelectの値が変わったときに、#colorBoxの背景色をその値にする処理をchangeイベントで行うことをAIに具体的に伝えましょう。選択肢の値がそのまま色名として使える点も伝えると安心です。

曖昧に頼むとAIはinputイベントを使ってしまい、選択が確定する前に処理が実行されるような実装になることがあります。

あなたのコード

実行しました

プレビュー

AIレビュー(プロンプト練習)

コードはChatGPTやClaudeに出させたものを貼って構いません。
ここでの本番は「次にAIへ出す指示」です。評価軸は1つだけ見て、弱点・指示の穴・改善例を返します。
テストに落ちていてもレビューできます。落ちた理由と、指示に足りなかった情報を結びつけます。

先にコードを実行し、テストを1つ以上通してください。