Question

我正在制作轮播滑块，尽管它可以正常工作，但出现以下错误：something.js:46 Uncaught TypeError: Cannot read property 'style' of undefined

使用以下函数将运行此代码的脚本设置为在页面加载后运行

function ready(callback){
  // in case the document is already rendered
  if (document.readyState!='loading') callback();
  // modern browsers
  else if (document.addEventListener) document.addEventListener('DOMContentLoaded', callback);
  // IE <= 8
  else document.attachEvent('onreadystatechange', function(){
      if (document.readyState=='complete') callback();
  });
}

轮播看起来像this。

HTML的结构为this。

我有一个脚本，该脚本生成其中包含必要元素的li对象。

var listElement = document.createElement("li");
var textElement = document.createElement("p");
var linkElement = document.createElement("a");
linkElement.setAttribute("href","/web/window/window.html");
var textContent = document.createTextNode(data.results[i].original_title);
textElement.appendChild(textContent);
listElement.setAttribute("class", "card");
listElement.setAttribute("data-target", "card")
var imgElement = document.createElement("IMG");
var imgPath = "https://image.tmdb.org/t/p/w780"+data.results[i].poster_path;
imgElement.setAttribute("src",imgPath)
linkElement.appendChild(imgElement);
listElement.appendChild(linkElement);
listElement.appendChild(textElement);
document.getElementById("ulMV").appendChild(listElement);

最后是运行转盘的脚本，该脚本位于head标签中。

ready(function(){
  const carousel = document.querySelector("[data-target='carousel']");
  const card = carousel.getElementsByClassName("card");
  console.log(card)
  const leftButton = document.querySelector("[data-action='slideLeft']");
  const rightButton = document.querySelector("[data-action='slideRight']");


  let offset = 0;

  leftButton.addEventListener("click", function() {
    if (offset !== 0) {
      offset += 234;
      for(var x = 0;x<=card.length;x++){
        card[x].style.transform = `translateX(${offset}px)`;
      }
    }
  })

  rightButton.addEventListener("click", function() {
    offset -= 234;
    for(var x = 0;x<=card.length;x++){
      card[x].style.transform = `translateX(${offset}px)`;
    }

  })
})

这使用了首先提到的ready函数。

一切正常，但每次按两个按钮中的任何一个，错误都会不断出现。

Answer 1

for(var x = 0;x<=card.length;x++){

这行可能是个问题（当然每次都会出现）。数组是零索引的。 length属性仅返回许多项目。如果您考虑元素数量，则可能为1到<number_of_elements>。但是循环上下文是从0到<number of elements> - 1。

假设您有4个元素。

el1
el2
el3
el4

els数：4 您的循环从0开始执行，直到card.length更高或相等为止。因此它执行0、1、2、3和4。它执行5次，但是只有4个元素。只需将其更改为x < card.length即可使用。然后，如果它命中i = 4，则不会执行，因为4 < 4为假。

尽管一切正常，但无法读取未定义的属性“样式”

1 个答案: