お疲れ様です。
今日は昨日の続きをやっていきました。
昨日は画像表示する手前で、エラーが出てしまうところでしたので、エラーを解決しつつ、あと残り2つのボタンにも別の画像を紐づけして、選択されたときに表示されるようにJavaScriptのコードを書いていきました。
画像が残っておりませんが、昨日出たエラーは定数名の設定でひっかかりがあったようです。
調べても分からなかったので、chatGPT先生に教えていただきましたが、getElementByClassName("btn")の定数名を Btn としていましたがそれがひっかかっているかもということでしたので、 btns に変更。
そして、addEventListener の使い方が間違っており、getElementByClassName で取得したボタンすべてに addEventListener を追加しなければならなかったようです。
というわけで定数名変更、コードの書きなおしと、for文のところはGPT先生に教わりながら記述しました。
その結果、それぞれのボタンに対して、全3種類の画像を紐づけすることができ、「選択」ボタンを押すことで表示できるようになりました！
ただ…
ページを更新せず、別のボタンを選択すると、前に表示されていた画像がそのまま残っちゃいました…
それはそうだと思います。隠すようなコードを書いてませんので…
なので、これについては display: none を使って画像を隠すようにしていけば大丈夫なようですので、分からない部分を調べつつ実装していきます
そこができるようになったら、少し前にやったことのある keyframe を使ってふわっと画像が表示されるように変更したり、労りのメッセージも一緒にだせる（のか分かりませんが）ようにやっていきたいと思います！