document.getElementsByClassName使用求助：功能正常但控制台报错

首先看你控制台的报错：Cannot read property 'style' of undefined，这说明在循环里你尝试访问一个不存在的元素的style属性，根源出在拼写错误上！

你写的循环条件是：

for(var i = 0; i!=elements.lenght; i++)

这里的lenght是拼写错误，正确的属性名是length（少了个t）。这个错误会导致：

• 因为elements.lenght是undefined，i != undefined的判断在i从0开始后会一直为true，循环会无限执行下去
• 当i超过elements实际包含的元素数量时，elements[i]就会变成undefined，这时候访问它的style属性就会抛出你看到的类型错误

修正后的代码 #

把拼写错误改掉，同时建议用更安全的<判断代替!=，避免动态集合可能带来的问题（虽然这里主要是拼写错误，但<是更通用的循环条件写法）：

<button onclick="MostrarPuntaje()">Mostrar Puntajes</button>

function MostrarPuntaje(){ 
  var elements = document.getElementsByClassName('puntaje'); 
  // 修正拼写错误，改用i < elements.length的判断
  for(var i = 0; i < elements.length; i++){ 
    elements[i].style.visibility = 'visible'; 
  }
}

额外小提示 #

getElementsByClassName返回的是一个动态HTMLCollection，如果在循环过程中DOM结构发生变化，集合会自动更新。不过在你的场景里，只是修改元素的可见性，不会影响集合的数量，所以这个修正后的代码完全可以正常工作。

内容的提问来源于stack exchange，提问作者Aceman