蛇形机器人代码出现Uncaught TypeError错误，如何修复？

嘿，我来帮你搞定这个问题！你遇到的错误根源其实很明确——你用错了获取DOM元素的方式。

错误原因 #

document.getElementsByClassName()返回的是一个HTMLCollection（类数组对象），哪怕页面上只有一个匹配的元素，它也会把元素放进这个集合里。你直接访问y.style的时候，这个集合本身并没有style属性，所以y.style是undefined，自然就会抛出"Cannot read property 'left' of undefined"的错误。

修复方案 #

你需要从这个集合里取出具体的元素（也就是第一个元素，因为你的页面里只有一个匹配的div），再访问它的style属性：

var y = document.getElementsByClassName('snake-snakebody-block snake-snakebody-alive snake-snakebody-alive');
// 先确认集合里有元素，再访问第一个元素的样式
if (y.length > 0) {
  console.log(y[0].style.left);
  console.log(y[0].style.top);
}

更简洁的写法 #

其实你可以用document.querySelector()来直接获取第一个匹配的元素，它比getElementsByClassName()更直观，哪怕你的类名重复了也能正常匹配：

// 用querySelector直接定位第一个符合条件的元素
var y = document.querySelector('.snake-snakebody-block.snake-snakebody-alive.snake-snakebody-alive');
// 检查元素是否存在，避免报错
if (y) {
  console.log(y.style.left);
  console.log(y.style.top);
}

额外提醒 #

一定要加上元素存在性检查（比如if (y.length > 0)或者if (y)），这样可以避免页面元素还没加载完成，或者元素被移除时再次触发类似的错误。

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