尽管一切正常，但无法读取未定义的属性'style'

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为假。