匿名函数错误：SyntaxError：意外的输入结束

Question

我正在我的 Javascript 代码中动态创建 DOM 元素，并且我正在尝试添加一个匿名函数作为onclick事件处理程序。 这是我的代码：

var onClickFunction = "(function(){var x = document.getElementById('onPrsClickButton'); x.value = this.id; x.click();})()";

var libelle = '<div onclick=' + onClickFunction + '></div>'

但是每当我点击这个<div> ，控制台都会给我这个错误：

SyntaxError: Unexpected end of input

有谁知道为什么？ 谢谢 ！

Answer 1

打印输出将是

<div onclick=(function(){var x = document.getElementById('onPrsClickButton'); x.value = this.id; x.click();})()></div>

这不是有效的 HTML 属性值。
要使其有效，您必须将值括在引号 (") 或撇号 (') 中。
一些浏览器可以承受一定程度的滥用，比如没有编写正确的语法，但这是不可信的。

此外，您的代码具有IIFE （立即调用的函数表达式）。 这意味着函数内的代码将立即执行，而不是在您单击时执行（尽管我不确定在这种特殊情况下的实际行为）。

为了使您的示例工作，您可以执行以下操作：

var onClickFunction = function(){
    // Your event handler
};

var libelle = '<div onclick="javascript:onClickFunction();"></div>'

但是解决您的问题的最佳方法 (IMO) 是为您的点击添加一个侦听器，如下所示：

var libelle = document.getElementById("libelle");
libelle.addEventListener('click', function(){
    // Your event handler
});