JS贪吃蛇代码运行报Cannot read property 'style' of undefined错误

你遇到的Uncaught TypeError: Cannot read property 'style' of undefined报错，本质是尝试访问undefined对象的style属性，触发该问题有两个直接原因：

• for循环边界设置错误：你当前的snake数组长度为5，下标范围是0~4，但循环条件写的是x<=snake.length，当x等于5时，snake[5]返回undefined，nodeArray[undefined]自然也是undefined，调用style属性就会触发报错。
• nodeArray放在函数内时的执行时机问题：document.getElementsByClassName是实时获取DOM节点的API，如果你调用snakeMake函数时，类名为node的DOM节点还没渲染挂载到页面上，获取到的nodeArray就是空集合，访问对应下标的元素也会返回undefined。

1. 修正for循环的边界条件，把x<=snake.length改为x<snake.length
2. 如果要把nodeArray放到函数内，要保证调用snakeMake函数时，所有node节点已经完成DOM渲染

// 创建蛇身坐标数组
let snake=[12,13,14,15,16]

snakeMake()

function snakeMake(){
    // 移到函数内时，需保证此时所有node节点已渲染到页面
    const nodeArray=document.getElementsByClassName("node")
    // 修正循环边界
    for (let x=0;x<snake.length;x++){
        nodeArray[snake[x]].style.backgroundColor="white"  
    }
}

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