質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.42%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

button

HTMLで用いる<button>タグです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

4571閲覧

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

Pyonth

総合スコア1

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

button

HTMLで用いる<button>タグです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2022/07/29 17:10

前提

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の領域の取得がうまくいっていないと思ったので、その周辺を確認しましたが、いくら調査しても動く気配がありませんでした。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

総合スコア69558

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Pyonth

2022/07/30 16:50

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

2022/07/30 18:21

slider[0]としていたので querySelectorAll と回答しましたが、コードとしては querySelector のままでslider.getBoundingClientRect() とするほうが良いですね、すみません。
Pyonth

2022/07/31 13:32

ご教示いただきありがとうございます。 slider.getBoundingClientRect()としたところ解決することができました。 後はまた自分で試行錯誤してみようと思います! ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.42%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問