Jsでフェードアウトを実装したい

Question

前提

JavaScriptでローディング画面がフェードアウトするコードを制作しています。

実現したいこと

document.getElementByIdではなく、getElementsByClassNameでclass 指定をしたいです。

発生している問題・エラーメッセージ

js.js:4 Uncaught TypeError: Cannot read properties of undefined (reading 'remove')
というエラーがでてしまいます。

```HTML
  <div id="loading" class="is-hide loading">
    <div id="loading__logo" class="is-hide loading__logo">
      <img src="loading__icon.png" alt="" class="loading__fadeUp">
    </div>
  </div>

/* 非表示 */
.is-hide {
  display: none;
}
/* ローディング画面をフェードアウト */
.fadeout-bg {
  transition-property: opacity;
  transition-delay: .9s;
  transition-duration: .8s;
  opacity: 0;
  pointer-events: none;
}
/* ローダーをフェードアウト */
.fadeout-loader {
  transition-property: opacity;
  transition-delay: .9s;
  transition-duration: .3s;
  opacity: 0;
  pointer-events: none;
}



.loading {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 900;
  background: white;
}

.loading__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loading__logo img {
  min-width: 15rem;
  max-width: 30rem;
  ;
}

.loading__fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

var bg = document.getElementsByClassName('loading'),
    loader = document.getElementsByClassName('loading__logo');
bg.classList.remove('is-hide');
loader.classList.remove('is-hide');

/* 読み込み完了 */
window.addEventListener('load', stopload);

/* 10秒経ったら強制的にロード画面を非表示にする */
setTimeout('stopload()',10000);

/* ロード画面を非表示にする処理 */
function stopload(){
    bg.classList.add('fadeout-bg');
    loader.classList.add('fadeout-loader');
}

Answer 1

var bg = document.getElementsByClassName('loading'),
loader = document.getElementsByClassName('loading__logo');

getElementsByClassNameで得られる値がHTMLCollectionだからでしょう

const bg = document.querySelector('.loading');
const loader = document.queySelector('.loading__logo');