JavaScript点击按钮自增元素id属性不生效问题咨询

问题根因 #

第一次点击按钮执行逻辑时，你已经成功把<p>标签的id从demo修改为1了。第二次点击时，再调用document.getElementById("demo")已经找不到对应元素，返回null，后续对id赋值的操作会直接报错，逻辑中断。而修改innerHTML的场景下，你全程没有改动元素的id属性，每次都能正常找到目标元素，所以可以正常执行。

修复后的代码示例 #

页面结构 #

<p id="demo"></p>
<button onclick="myfunction()">press me</button>

逻辑代码 #

var a = 1;
// 提前缓存目标元素，只查找一次
const targetEle = document.getElementById("demo");
function myfunction(){
    targetEle.id = a;
    a++;
    // 可打开浏览器控制台查看id修改结果
    console.log('当前元素id：', targetEle.id);
}

补充说明 #

如果需要后续也能通过规则化的id查找该元素，建议给id加固定前缀，避免纯数字id可能带来的兼容性问题，示例如下：

targetEle.id = `demo-${a}`;

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