主页 / 问题 / 1059042
Accepted
Streammer
Asked:2020-12-16 01:07:39 +0000 UTC2020-12-16 01:07:39 +0000 UTC

无法在 DOM 元素上设置样式属性 [关闭]

  • 772

我正在尝试用纯 JS 制作一个滑块。出现以下问题。我得到一个元素列表，将其转换为数组，然后循环遍历并将 left 属性分配给每个元素。我收到错误“Uncaught TypeError: Cannot set property 'left' of undefined at positionSlides (carousel.js:21) at carousel.js:24”

这是我的 HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Slider</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <button class="btn left-btn hide">
            <img src="img/left-arrow.svg" alt="left buton">
        </button>
        <div class="carousel-container">
            <ul class="carousel" id ="carousel">
                <li class="slide active">
                    <img src="img/picture1.jpg" alt="slider image">
                </li>
                <li class="slide">
                    <img src="img/picture2.jpg" alt="slider image">
                </li>
                <li class="slide">
                    <img src="img/picture3.jpg" alt="slider image">
                </li>

            </ul>
        </div>
        <button class="btn right-btn">
            <img src="img/right-arrow.svg" alt="right button">
        </button>
        <div class="nav">
            <div class="dot active"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
    </div>
    <script src="carousel.js"></script> 
</body>
</html>

这是JS

//select carousel
const carousel = document.querySelector(".carousel");
//select next button
const nextButton = document.querySelector(".right-btn");
//select left button
const previousButton = document.querySelector(".left-btn")
//select the nav
const nav = document.querySelector(".nav");
//select all the dots
const dots = [...nav.children];
//select all the slides inside the carousel
const slides = [...carousel.children];
//calculate the slides width

let slideWidth = slides[0].getBoundingClientRect().width;

//position the slides horisontaly
function positionSlides(slides){
    for(let index = 0; index < slides.length; index++){
        slides[index].slyle.left = slideWidth * index + 'px';
    }
}
positionSlides(slides);

//on right button click, we move (translateX) the carousel to the left
nextButton.addEventListener("click", function(){
    const currentSlide = carousel.querySelector(".active");
    const nextSlide = currentSlide.nextElementSibling;
    moveToSlide(carousel, currentSlide, nextSlide);
    hideButton(nextSlide, slides);
    moveToDot(nextSlide, slides, nav, dots);
});

//on left button click, we move (translateX) the carousel to the right
previousButton.addEventListener("click", function(){
    const currentSlide = carousel.querySelector(".active");
    const previousSlide = currentSlide.previousElementSibling;
    moveToSlide(carousel, currentSlide, previousSlide);
    hideButton(previousSlide, slides);
    moveToDot(previousSlide, slides, nav, dots);
});

//on dot click
nav.addEventListener("click", function(e){
    //if we didn't clcik on a dot, we exit
    if(e.target === nav) return;
    //select the clicked dot
    const targetDot = e.target;
    //select the current dot
    const currentDot = nav.querySelector(".active");
    //select the current slide
    const currentSlide = carousel.querySelector(".active");
   //find the index of the dot, so we can target the right slide
    let targetDotIndex = findIndex(targetDot, dots);
    //select the target slide
    const targetSlide = slides[targetDotIndex];
    moveToSlide(carousel, currentSlide, targetSlide);
    toggleActive(currentDot, targetDot);
    hideButton(targetSlide, slides);
})

//move to dot
function moveToDot(targetSlide, slides, nav, dots){
    let slideIndex = findIndex(targetSlide, slides);
    const currentDot = nav.querySelector(".active");
    const targetDot = dots[slideIndex];
    toggleActive(currentDot, targetDot);
}
//move to slide
function moveToSlide(carousel, currentSlide, targetSlide){
    const position = targetSlide.style.left;
    carousel.style.transform = `translateX(-${position})`;
    toggleActive(currentSlide, targetSlide);
}

//toggle active class
function toggleActive(current, target){
    current.classList.remove("active");
    target.classList.add("active");
}

//hide button
function hideButton(targetSlide, slides ){
//if the target slide is the first slide the previous button must be hidden
//and the next button must be shown
    if(targetSlide === slides[0]){
        previousButton.classList.add("hide");
        nextButton.classList.remove("hide");
    }else if(targetSlide === slides[slides.length - 1]){
        //if the target slide is the last slide the next button must hidden
        //and the previous button must be shown
        nextButton.classList.add("hide");
        previousButton.classList.remove("hide");
    }else{
//if none of the above is true, we show both the next and the previous buttons
    previousButton.classList.remove("hide");
    nextButton.classList.remove("hide");
    }
}

//find index of an item an array of items
function findIndex(item, items){
    for(let index = 0; index < items.length; index++){
        if(item === items[index]){
            return index;
        }
    }
}

我收到以下错误。

Uncaught TypeError: Cannot set property 'left' of undefined
at positionSlides (carousel.js:21)
at carousel.js:24

那些。这部分代码给出了错误

function positionSlides(slides){
    for(let index = 0; index < slides.length; index++){
        slides[index].slyle.left = slideWidth * index + 'px';
    }
  }
positionSlides(slides);

事实证明，slides 数组中的 DOM 元素没有样式属性。或者当我创建一个数组时它没有被保存。如何解决？

分支 my_first_attempt 中的完整代码https://github.com/Streammer/slider.git

javascript

1 个回答

  1. Best Answer

    你拼错了一个单词style（写成 s l yle）。

    • 1

相关问题