匿名功能错误：语法错误：输入意外结束

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
});