尽管一切正常，但无法读取未定义的属性 '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 属性 returns 只是一些项目。如果考虑元素的数量，它可能是从 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 是假的。

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

Cannot read property 'style' of undefined although everything works

html

javascript

css

dom

css-transforms

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

Cannot read property 'style' of undefined although everything works

html

javascript

css

dom

css-transforms

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