未捕获的类型错误：无法读取 null 的属性（读取“clientWidth”）

Question

            <div id=" sliderContainer" class="w-10/12 overflow-hidden">
                <ul id="slider" class="flex w-full">
                    <li class=" p-5">
                        <div class="border rounded-lg p-5">
                            <img th:src="@{'/images/logo.png'}" class="h-28 w-full rounded-lg object-cover" alt="">
                            <h2 class="mt-2 font-bold text-center text-gray-700">Some BigHeadline</h2>

                            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore maxime illo, incidunt

                            </p>
                            <button class="mt-3 px-6 py-3 rounded-md bg-green-800 text-white">Read More</button>
                        </div>
                    </li>

javascript

let sliderContainer = document.getElementById('sliderContainer');
let slider = document.getElementById('slider');
let cards = slider.getElementsByTagName('li');
let elementsToShow = 3;
let sliderContainerWidth = sliderContainer.clientWidth;
let cardWidth = sliderContainerWidth / elementsToShow;
slider.style.width = cards.length * cardWidth + 'px';
for (let index = 0; index < cards.length; index++) {
    const element = cards[index];
    element.style.width = cardWidth + 'px';
}

每当我尝试运行时，它都会显示无法读取 clientwidth 上的空引用 我尝试将脚本添加到代码底部

Answer 1

div 容器 id 中的间距很小，请删除此处的小间距

• 错误的方式 id="sliderContainer"
• 正确的方式 id="sliderContainer"