要素をフェードインさせようとしたらUncaught TypeErrorが出た

結論

document.getElementsByClassName()の結果は、配列のようなものになっている
参考サイトhttps://teratail.com/questions/231849

修正前のコードとそのエラーの内容

custom.scss

.bg-white{
  padding: 3rem;
  opacity: 0;
  /*要素を左に100pxずらしたところに配置する*/
  transform:translateX(-100px);
  /*透過度と表示位置を1秒かけて変化させる*/
  transition:opacity 1s,transform 4s;
}
.bg-white-after{
  opacity: 1;
  transform:translate(0);
}

home.html

<script>
 let bgWhite = document.getElementsByClassName("bg-white");

  window.addEventListener('load', (event) => {
    bgWhite.classList.add("bg-white-after");
  });
</script>

要素を取得してaddEventListenerを使って"bg-white-after"クラスを付けて
いい感じにふわっと表示させたかったのですが、
Uncaught TypeError: Cannot read properties of undefined (reading 'add')

と出てしまいました。

試したこと

home.html

<script>
 let bgWhite = document.getElementsByClassName("bg-white");
  window.addEventListener('load', (event) => {
    console.log(bgWhite);
    bgWhite.classList.add("bg-white-after");
  });
</script>

console.logで要素を取得できているか確認。

うん、ちゃんととれてる。

冒頭にも書かせていただいた参考サイトを見てみると、
HTMLのclass属性は、複数の要素につけることができる前提なので、
document.getElementsByClassName()の結果は、配列のようなものになっているとのこと。
ということで

修正後のコード

home.html

<script>
 let bgWhite = document.getElementsByClassName("bg-white");

  window.addEventListener('load', (event) => {
    bgWhite[0].classList.add("bg-white-after");
  });
</script>

そうすると、エラーが解消されて思い通りに要素が動きました。
document.querySelector　で取得するか、
クラス名で取得するときはたとえ1つの要素でも配列にして出してあげましょう。