JS设置innerHTML报Cannot set properties of undefined错误排查

报错核心是DOM操作的写法错误：document.getElementById()方法的返回值是匹配对应ID的单个DOM元素对象，不是getElementsByClassName/querySelectorAll那种返回类数组节点集合的方法，你在取值时多加了[0]索引，相当于在已获取到的DOM元素上读取下标为0的属性，这个属性值是undefined，给undefined设置innerHTML属性就会触发你看到的Uncaught TypeError。
你之前console.log打印结果不为null是正常的——你打印的是document.getElementById('harta-modal')本身，这个元素确实存在，但赋值语句额外加了[0]，取到的是不存在的属性值。

直接删除赋值语句里多余的[0]即可，修复后的makeMap函数代码如下：

function makeMap(longitude, latitude){
    console.log(document.getElementById('harta-modal'));
    document.getElementById('harta-modal').innerHTML = `${longitude} ${latitude}`;
}

• 你PHP循环生成的所有.continut-text-box元素都写了相同的id="open"，HTML标准要求页面中ID全局唯一，重复ID会引发后续DOM查询、事件绑定的异常，建议移除这个重复ID，或者拼接循环索引生成唯一ID。
• 目前你用内联onclick逐个绑定事件，如果要实现给所有class为continut-text-box的元素统一绑定点击事件的需求，可以用JS事件委托实现，不用在PHP拼接的HTML里逐个写onclick属性，后期维护更方便。

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