求助：JavaScript传递字符串参数却收到表单对象的原因

问题根源 #

你通过setAttribute拼接onclick事件字符串时，没有给参数添加引号，导致浏览器将hi和bye当成全局变量解析。而浏览器会自动把页面中id="hi"的表单元素挂载为全局变量，name="bye"的输入框也会被关联到对应表单的属性上，最终函数接收到的是DOM对象而非你期望的字符串。

解决方法 #

方法1：给拼接的字符串参数添加引号

在拼接事件字符串时，为参数加上单引号（注意转义或用不同引号包裹）：

// 转义单引号写法
elCheckbox.setAttribute('onclick','toggleHideField(\'' + myFormId + '\', \'' + myInputName + '\');');

// ES6模板字符串写法（更简洁）
elCheckbox.setAttribute('onclick',`toggleHideField('${myFormId}', '${myInputName}');`);

方法2：使用事件监听代替字符串拼接（推荐）

直接通过addEventListener绑定事件，避免字符串解析的问题，代码更清晰安全：

elCheckbox.addEventListener('click', function() {
  toggleHideField(myFormId, myInputName);
});

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