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

Question

I am trying to pass a variable from an HTML file in a jquery selector that contains HTML tags to a JavaScript function.

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

Where userTweet() is a function in my linked JavaScript file and streams.home[index].user is an array of user objects with user , message , and created_at keys. When I click on the div, I get the error

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

With VARIABLE being the user name in the user property of streams.home[index]

How can I pass this variable to run the function in my JavaScript file? Please let me know if you require any further information.

Thanks!

Answer 1

Is your userTweet available on window? if so then

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

Answer 2

You are victim of single quotes(') and double quotes(") here.

When you tried to do

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

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

Your string is not what you expected.

This is string that formed:

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

This is what you expected it to be:

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

So when you called userTweet you passed a variable mike which doesn't exist and this error.

The difference in both the calls is userTweet(mike) and userTweet('mike') . On first call mike is variable(your case) and on second one it's a value.

Would recommend you to follow this link over string and backticks in javascript as this provides solution to your problem.

Also just do this

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