【週刊ドットインストール】 学習ロードマップにPHP/Laravelを追加、最近のAI使いこなしTips
いつもお世話になります。
下記のコードの「←ココ」について教えてください。
const next = document.getElementById('next'); const ul = document.querySelector('ul'); const slides = ul.children; next.addEventListener('click',() => { const slideWidth = slides[0].getBoundingClientRect().width; ←ココ // console.log(slideWidth); ul.style.transform = `translateX(${-1 * slideWidth}px)`; });
ul.children; で、li 要素を配列の形で取得できている理解をしております。 ので、a b c とも同じ幅だと思うので、[1] [2] でも試したところ、同じ挙動をしました。
ul.children;
li
[1]
[2]
[3] でしたところ、下記のエラーが出ました。
[3]
main.js:9 Uncaught TypeError: Cannot read properties of undefined (reading 'getBoundingClientRect') at HTMLButtonElement.<anonymous> (main.js:9:32)
この [0] は、はじめが a つまり [0] なので、[0] にしただけで、3 つの li 要素がすべて同じ幅であるならば、 [1] [2] でも構わない認識でよろしいですか?
[0]
よろしくお願いいたします。
ドットインストールは、3分動画でマスターできるプログラミング学習サービスです。
3分で気軽に学習でき、スマートフォンからも視聴可能です。ホームページやWebサービスの制作を通して、実践的にプログラミングを学べます。
他にも、ゲーム制作やデータ分析・機械学習・AIに使われる言語まで幅広くカバー。学びたい分野のレッスンがきっと見つかります。
この回答を見るにはプレミアムプランへの登録が必要です
いつもお世話になります。
下記のコードの「←ココ」について教えてください。
ul.children;で、li要素を配列の形で取得できている理解をしております。ので、a b c とも同じ幅だと思うので、
[1][2]でも試したところ、同じ挙動をしました。[3]でしたところ、下記のエラーが出ました。この
[0]は、はじめが a つまり[0]なので、[0]にしただけで、3 つのli要素がすべて同じ幅であるならば、[1][2]でも構わない認識でよろしいですか?よろしくお願いいたします。