画像の選択とボタンの操作



以下、私の追記。

これはChatGPTに書いてもらったコードです。画像ソース・画像CSSは修正しています。

ChatGPTへの質問:
HTML、CSS、JavaScriptで下記のコードを書いてほしい。 複数画像があり、クリックすると画像の色が変わり、複数選択出来る。 それぞれの画像の下に、空白のテキストエリアがある。 画像群の下に複数のボタンがあり、ボタンをクリックするとボタンの色が変わり、複数選択できる。 画像を選択した状態でボタンをクリックすると、ボタンの文字がテキストエリアに挿入される。 もう一度ボタンをクリックすると、テキストエリアに挿入されているそのボタンの文字が消される。

ChatGPTからの回答
このソースコード(viewportだけ私が足してます)に加え、下記文章。
上記のコードでは、画像をクリックすると選択状態が切り替わり、 選択された画像の下のテキストエリアにはボタンの文字が挿入されます。 また、ボタンをクリックすると選択状態が切り替わり、 選択されたボタンの文字がテキストエリアに挿入されます。 同じボタンをもう一度クリックすると、テキストエリアからそのボタンの文字が削除されます。