Question

又一个未捕获的类型错误：无法读取未定义的属性“replace”

2016-03-29

628

javascript

我正在编写一些 JS 代码来切换某些 DOM 元素的类。一切都按预期运行，但我也遇到了这个错误，这阻止了后面的代码执行。

我添加了一个检查以确保元素数组不为空，因为我认为这是问题所在。但错误仍然发生。当对 replace 调用时，调试总是显示 old_name 的值。我是否遗漏了某些 JS 风格的内容？

这是导致错误的代码部分，具体来说是第 31 行：

if (w > MOBILE_THRESHOLD) {
    responsive_elements = document.getElementsByClassName("desktop");
    if (responsive_elements.length > 0) {
      for (i in responsive_elements) {
        var old_name = responsive_elements[i].className;
        var new_name = old_name.replace("desktop", "mobile");
        responsive_elements[i].className = new_name;
      }
    }

必要时，我很乐意提供更多代码或任何所需的信息。谢谢！

Answer 1

切勿使用 for...in 循环来迭代类似数组的对象！！！！！

在这种情况下， HTMLCollection 具有可枚举属性，如 item 或 namedItem 。访问这些不会返回 HTML 元素，因此 className 将未定义。

要正确迭代，您可以使用以下之一

for(var i=0; i<responsive_elements.length; ++i) {
  // ...
}

[].forEach.call(responsive_elements, function(element, index, collection) {
  // ...
});