解決方法　Uncaught TypeError: Cannot read properties of undefined (reading 'getBoundingClientRect')

前提

JavaScriptにてカルーセルを作っています。
nextボタンを実装中に以下のエラーメッセージが発生しました。

実現したいこと

nextボタンを押下すると画像が次の画像にスライドするようにしたいです。

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

Uncaught TypeError: Cannot read properties of undefined (reading 'getBoundingClientRect')
    at HTMLButtonElement.<anonymous> (main.js:16:34)

HTML

<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Monster Hunter Sunbreak</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet">
  <link rel="icon" href="img/favicon_logo.png">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>
      <a href="index.html">
        <img src="img/logo_mhs.png" alt="MONSTER HUNTER">
      </a>
    </h1>
    <nav>
      <a href="https://www.monsterhunter.com/ja/about/">モンスターハンターとは？</a>
      <a href="https://www.monsterhunter.com/ja/news/">ニュース</a>
      <a href="https://www.monsterhunter.com/ja/lineup/">タイトルラインナップ</a>
    </nav>
  </header>

  <main>
    <div class="container">
      <div class="carousel">
        <div class="slider-button">
          <ul class="slides">
            <!-- Iceborn -->
            <li>
              <a href="https://www.monsterhunter.com/ja/20211029/mhwi_usj_cooljapan2022/">
              <img src="img/mhwi_211104_mhp.jpg" alt="モンスターハンター:アイスボーン">
              </a>
            </li>
            <!-- Sunbreak -->
            <li>
              <a href="https://www.monsterhunter.com/rise-sunbreak/ja/">
                <img src="img/rise-sunbreak_220630_mhp.jpg" alt="モンスターハンター:サンブレイク">
              </a>
            </li>
            <!-- Rise -->
            <li>
              <a href="https://www.capcom.co.jp/monsterhunter/rise/platform.html">
                <img src="img/rise_220701_mhp.jpg" alt="モンスターハンター:ライズ">
              </a>
            </li>
          </ul>
          
          <button id="prev">&laquo;</button>
          <button id="next">&raquo;</button>
        </div>
      </div>

    </div>
  </main>
  
  <script src="js/main.js"></script>
</body>
</html>

CSS

main {
  width: 80%;
}
/* ↑全部完成したら外す */

.container {
  width: 300%;
  margin: 20px auto;
  height: auto;
}

.carousel {
  width: 100%;
  height: 100%;
  border-radius: 3px;
  display: flex;
  padding: 10px;
  /* ↑全部完成したら外す */
  justify-content: flex-start;
  border: 2px solid orange;
}

/* .carousel {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  position: relative;
  outline: 2px solid red;
} */

.slider-button {
  display: flex;
  height: 100%;
  width: calc(100% / 3);
  position: relative;
}

.slides {
  display: flex;
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  flex-shrink: 0;
  transition: transform 0.3s;
  /* overflow: hidden; */
  border: 2px solid blue;
}

.slides li {
  flex-basis: 20%;
  width: 100%;
  flex-shrink: 0;
  flex: 1;
  list-style: none;
}

li {
  min-width: 100%;
}

li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#prev,
#next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 6vw;
  border: none;
  cursor: pointer;
  background-color: #4e2208;
  color: #fff;
  font-size: 24px;
  opacity: 0.8;
}

#prev:hover,
#next:hover {
  opacity: 1.0;
}

#prev {
  left: 0;
}

#next {
  right: 0;
}

JavaScript


{
  // 要素の呼び出し
  const next = document.getElementById('next');
  const prev = document.getElementById('prev');
  const slider = document.querySelector('.slides');

  // 定義
  let currentSlider = 0;


  // 次へボタンの機能
  next.addEventListener('click', () => {
    currentSlider++;
    const slideWidth = slider[0].getBoundingClientRect().width;
    slider.style.transform = `translateX(${-1 * slideWidth * currentSlider}px)`;
  });

  // 前へボタンの機能
  prev.addEventListener('click', () => {
    currentSlider--;
    const slideWidth = slider[0].getBoundingClientRect().width;
    slider.style.transform = `translateX(${-1 * slideWidth * currentSlider}px)`;
  });

試したこと

getBoundingClientRectが取得するWidthの領域の取得がうまくいっていないと思ったので、その周辺を確認しましたが、いくら調査しても動く気配がありませんでした。

回答1件

ベストアンサー

querySelector ではなく querySelectorAll では？

【Document.querySelector() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector

【Document.querySelectorAll() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll

投稿2022/07/29 18:22

kei344

総合スコア69248

回答へのコメント

Pyonth

2022/07/30 16:50

ご教示ありがとうございます。ご指摘いただいた通りquerySelectorAllに変更したところエラーが以下に変更されました。 (main.js:17:28) slider.style.transform = `translateX(${-1 * slideWidth * currentSlider}px)`; ↑こちらの部分です。こちらも解決方法がわからない為ご教示いただけますと幸いです。よろしくお願いいたします。