いつもお世話になります。
下記のコードの「←ココ」について教えてください。
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]
でも試したところ、同じ挙動をしました。
[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]
でも構わない認識でよろしいですか?
よろしくお願いいたします。
この回答を見るにはプレミアムプランへの登録が必要です
プレミアムプランとは?