javascript - 类型 'length' 上不存在属性 'HTMLElement'

Question

我正在尝试循环遍历我拥有的导航项目的数量。但是当我这样做时，我收到错误:“HTMLElement”类型上不存在属性“length”。我知道我可以将 document.getElementById('nav-item) 更改为 document.getElementsByClassName('nav-item') 并且错误消失。但我并不想这样做。我通过元素的 id 访问该元素。谁能帮我解决这个问题吗？

const header = document.getElementById('applicationLinks');
const navItems = document.getElementById('nav-item');
for (let i = 0; i < navItems.length; i++) {
    navItems[i].addEventListener('click', function () {
      const current = document.getElementsByClassName('active');
      current[0].className = current[0].className.replace('active', '');
      this.className += ' active';
    });
}

谢谢，我是新手，所以我们将不胜感激。

Answer 1

你的问题是for循环。

代码

const navItems = document.getElementById('nav-item');

不返回元素数组。它返回单个对象。

所以删除 for 循环。

试试这个

const header = document.getElementById('applicationLinks');
const navItems = document.getElementById('nav-item');

navItems.addEventListener('click', function () {
      const current = document.getElementsByClassName('active');
      current[0].className = current[0].className.replace('active', '');
      this.className += ' active';
    });
}

如果 navItems 更改为 document.getElementsByClassName('nav-item');然后你会得到你的对象数组。这将使 for 循环工作。