js 拼接HTML时 onclick方法和传参报错[onject Object] 和 unexpected end of input`

本文主要是介绍js 拼接HTML时 onclick方法和传参报错[onject Object] 和 unexpected end of input`，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.onclick 方法函数找不到

我是拼接的表格，点击的<td>标签；

1. 拼接html 并增加onclick事件

	//实际列值填充
tablHtml += `<tdοnclick="previewNvrVideo(${data})">${columnItem?.actual}</td>`;

2.页面刚进去 注册点击函数(重要)

mounted() {//模板参数传参const _this = this;window.previewNvrVideo = (channelNum) => {_this.nvrPreview(channelNum);};
}

3.js 中 写点击函数内容

nvrPreview(data) {//点击之后 实现的逻辑
},

2.方法中传参

2.1 int 类型传参（直接传参）

tablHtml += `<td οnclick="previewNvrVideo(1)">${columnItem?.actual}</td>`;

2.2 字符串类型（需要加引号）

1.使用转义字符

tablHtml += `<td οnclick="previewNvrVideo(\'${data}\')"${columnItem?.actual}</td>`;

注意：JS中写法：str2 = '<div onclick="test2(\''+string+'\')">33</div>'

2.使用"（"是双引号，单引号为'，但是IE不支持）

tablHtml += `<td οnclick="previewNvrVideo(&quot;${data}&quot;)"${columnItem?.actual}</td>`;

2.3 对象（对象是不能直接拼接的。拼接的必须是字符串。因此需要将对象转成字符串。）

报错信息：如果直接使用对象。触发事件时会得到（[onject Object]）。会引起Uncaught SyntaxError: Unexpected identifier错误

1. 将对象拆开，只穿需要传递的参数（参考第二点，需要转义）
2. 设置全局变量
3. 使用JSON.stringify()将对象转换成json字符串，但是依然会报错unexpected end of input，
   该错误是因为json字符串的双引号和onclick的双引号冲突，需要将json字符串转成单引号字符串。

JSON.stringify(data).replace(/\"/g,"'");

这篇关于js 拼接HTML时 onclick方法和传参报错[onject Object] 和 unexpected end of input`的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---