替换innerHTML为DOM创建元素后匿名函数导致edit的id参数为空如何修复

• id赋值错误：你在给元素设置id时，"edit-button "后面多写了一个多余的空格，导致实际生成的id和预期规则不符，如果你有依赖id前缀匹配的逻辑会直接出现取值异常。
• 事件回调的引用错误：你在点击回调中直接引用外部的newEl变量，如果这段代码在循环中执行，由于var声明的变量存在函数作用域提升，所有按钮的回调最终都会指向循环结束时的最后一个newEl元素，无法拿到当前点击按钮的正确id，甚至会出现空值。原有innerHTML写法中使用this.id获取当前点击元素的逻辑更稳妥，你没有沿用该写法。

1. 去掉id赋值时的多余空格，和原有id生成规则保持一致
2. 点击回调中使用this指代当前被点击的按钮元素，规避外部变量引用的异常问题

修复后的完整代码：

var newEl = document.createElement("input");
newEl.className = "blue";
newEl.value = "Edit";
// 移除edit-button后的多余空格
newEl.id = "edit-button" + (i + 1);
newEl.type = "button";
// 用this获取当前触发点击事件的元素，和原有逻辑完全对齐
newEl.onclick = function() {
  edit(this.id);
};
cell3.appendChild(newEl);

DOM元素绑定的onclick回调执行时，内部this默认指向绑定该事件的DOM元素本身，和原有内联onclick写法中的this指向完全一致，不需要依赖外部变量，也不会受循环闭包问题的影响。

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