为什么onclick触发del函数时输出DOM元素而非传入的id值

问题原因 #

• 核心原因是onclick事件绑定的参数没有加引号，拼接后代码将id值识别为变量名而非字符串。你写的拼接代码'<button onclick="del(' + tabMsg[0] + ')">Try it</button>'最终生成的HTML是<button onclick="del(vuwzbip6dr)">Try it</button>，此时JS引擎会将vuwzbip6dr当做全局变量解析，而非字符串参数。
• 浏览器默认会将页面元素的id值注册为window对象的全局属性，属性值就是对应id的DOM元素。所以你调用del(vuwzbip6dr)时实际传入的是window.vuwzbip6dr，也就是你创建的那个DOM节点，因此控制台输出完整元素。
• 额外存在不规范写法：document.createElement('class')中的class不是合法的HTML原生标签，建议替换为div、span等标准容器标签。

修复方案 #

方案1：给字符串参数补充转义引号 #

修改innerHTML拼接代码，给参数包裹转义的单引号即可：

classMessage.innerHTML += '<button onclick="del(\'' + tabMsg[0] + '\')">Try it</button>'

拼接后最终生成的代码为del('vuwzbip6dr')，参数会被正确识别为字符串。

方案2：用DOM API绑定事件（更推荐） #

避免innerHTML拼接的引号问题和潜在XSS风险，直接创建元素绑定事件：

// 替换为合法的容器标签
let classMessage = document.createElement('div');
document.getElementById("chat").prepend(classMessage);
classMessage.id = tabMsg[0];
// 直接创建按钮绑定事件
const btn = document.createElement('button');
btn.innerText = 'Try it';
btn.addEventListener('click', () => del(tabMsg[0]));
classMessage.appendChild(btn);

function del(parsedata) {
  console.log(parsedata)
}

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