JavaScript記述中に発生したバグの話

はじめに

ポートフォリオ作成時、画像選択した際にプレビュー表示させる機能をJavaScriptで実装。
実装が完了し、アプリで実際に動作確認を行うと、プレビュー表示自体は実装できているが、他の項目編集を行うと、プレビュー表示が消えてしまうバグが発生しました。

行ったこと

プレビュー表示が既にされている場合、再度画像選択するとプレビュー画像を変更し元からあった画像を削除する機能も実装していたので、
この部分に記述ミス(取得ミス)があるのではと推測。(下記コード)

    imageUser = document.getElementById('user_image')
    if(imageUser){
      document.addEventListener('change', (e) => {
      const imageContent = document.querySelector('img')
      if (imageContent){
        imageContent.remove()
      }
      const file = e.target.files[0]
      const blob = window.URL.createObjectURL(file)

      createImageHTML(blob)
    }

3行目の画像を変更する対象として「document」を指定していたので、ページ内全ての項目変更に対応してしまっていた模様。
下記記述に修正することでバグ解消を行う事ができました。

imageUser.addEventListener('change', (e) => {
const imageContent = document.querySelector('img')
if (imageContent){
imageContent.remove()
}

さいごに

このバグ解消に時間をかなり使ってしまいました。
解決してみると、とても初歩的なミスだと気付いたので、まずは初心に帰る事が大事だなと教訓を得ました。
まだまだJavaScriptについても学習していきます！