window.onload触发修改指定ID元素文本失效，请求技术协助

问题分析 #

你的代码存在两个关键问题：

• forEach 回调未正确关联当前遍历元素，且重复通过ID查找元素（完全冗余）
• 使用非标准的 target 属性，虽浏览器不会报错，但不符合HTML规范

修复后的代码 #

HTML（改用规范自定义属性） #

<div id='inc_1' data-target='1'>111</div>
<div id='inc_2' data-target='2'>222</div>
<div id='inc_3' data-target='3'>333</div>
<div id='inc_4' data-target='4'>444</div>
<div id='inc_5' data-target='5'>555</div>

JavaScript（简化逻辑，修复遍历问题） #

function change_text() {
  // 选择所有id以inc_开头的元素
  const incList = document.querySelectorAll('[id^="inc_"]');
  // 直接遍历NodeList（现代浏览器原生支持）
  incList.forEach(element => {
    // 获取自定义属性值
    const tID = element.dataset.target;
    // 直接修改当前元素文本
    element.innerText += tID;
  });
}
window.onload = change_text;

关键修改说明 #

• 将非标准target属性改为data-target，符合HTML5自定义属性规范，通过element.dataset.target可便捷获取属性值
• 用NodeList.forEach替代[].forEach.call（现代浏览器均支持），回调直接接收当前元素，避免this指向问题
• 移除重复的document.getElementById调用，直接操作遍历到的元素，提升代码效率与简洁性

若需兼容老旧浏览器，可保留数组转换写法：

function change_text() {
  const incList = document.querySelectorAll('[id^="inc_"]');
  [].forEach.call(incList, function(element) {
    const tID = element.getAttribute('data-target');
    element.innerText += tID;
  });
}
window.onload = change_text;

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