index.html：1未捕获的ReferenceError：在HTMLDivElement.onclick中未定义VARIABLE

Question

我试图将包含HTML标记的jquery选择器中的HTML文件中的HTML变量传递给JavaScript函数。

var $tweeter = $('<div class="tweeter" onClick="userTweet(' + streams.home[index].user + ')"></div>');

其中userTweet()是链接的JavaScript文件中的函数，并且streams.home[index].user是具有user ， message和created_at键的用户对象的数组。 当我单击div时，出现错误

index.html:1 Uncaught ReferenceError: VARIABLE is not defined at HTMLDivElement.onclick

VARIABLE是streams.home[index]的user属性中的用户名

如何传递此变量以在JavaScript文件中运行该函数？ 如果您需要任何进一步的信息，请告诉我。

谢谢！

Answer 1

您的userTweet在窗口上可用吗？ 如果是的话

$('<div class="tweeter"/>').on('click', function() {
  window.userTweet(streams.home[index].user)
})

Answer 2

您是单引号（'）和双引号（“）的受害者。

当你尝试去做

var $tweeter = $('<div class="tweeter" onClick="userTweet(' + streams.home[index].user + ')"></div>');

// For Simplicity assuming streams.home[index].user value is 'mike'

您的字符串不是您期望的。

这是形成的字符串：

<div class="tweeter" onClick="userTweet(mike)"></div>
// Note mike is not a value but as a variable here

这是您期望的：

<div class="tweeter" onClick="userTweet('mike')"></div>
// Note 'mike' is value here

因此，当您调用userTweet您传递了一个不存在的变量mike和此错误。

这两个调用的区别是userTweet(mike)和userTweet('mike') 。 第一次调用mike是可变的（根据您的情况），而第二个mike是一个值。

建议您在javascript中的字符串和反引号上关注此链接，因为这可以解决您的问题。

也只是这样做

var $tweeter = $(`<div class="tweeter" onClick="userTweet(' ${streams.home[index].user} ')"></div>`);

// If on older version and new JavaScript is not supported then
var $tweeter = $('<div class="tweeter" onClick="userTweet(' + "'" + streams.home[index].user + "'" + ')"></div>');