html onclick not working when passing in function - onclick

Question

I know there are some posts on this, but none have quite fit what I'm looking for exactly.
I'm creating a simple version of twitter. My goal here exactly is to click on a user's handle (user link) and then display all their tweets. I'm using html's onclick and passing in a function, but this gets displayed: #[object Object],[object Object]: [object Object],[object Object] [object Object],[object Object]
The tweets all get wiped out, but now no tweets display. looks like in the js console i'm getting the right objects (person's tweets), but they just aren't displaying on the page properly. do you know what needs to happen here? any help in the right direction would be awesome.
Here's my relevant code:
var tweetCount;
var newCount;
var initialTweets = function() {
tweetCount = streams.home.length;
for(var i = 0; i < tweetCount; i++) {
var tweet = streams.home[i];
displayTweet(tweet);
}
};
var extraTweets = function() {
newCount = streams.home.length;
for(var i = tweetCount; i < newCount; i++) {
var tweet = streams.home[i];
displayTweet(tweet);
}
tweetCount = newCount;
};
var displayTweet = function(tweet) {
var $tweet = $('<div></div>');
var userLink = "<a href='#' onclick='displayUserTweets("+ tweet.user +")'>" + tweet.user + "</a>";
$tweet.html('#' + userLink + ': ' + tweet.message + ' ' + tweet.created_at);
$('#tweetContainer').prepend($tweet);
};
var displayUserTweets = function(user) {
$('#tweetContainer').html('<div></div>');
var $userTweets = $('<div></div>');
var userTweets = streams.users[user];
$userTweets.html('#' + userTweets.user + ': ' + userTweets.message + ' ' + userTweets.created_at);
$('#tweetContainer').prepend($userTweets);
};
initialTweets();
$(document).ready(function(){
$('button').on('click', function() {
extraTweets()
});
});

Answer 1

You are passing user as a onclick handler here, which should be javascript function.
var userLink = "<a href='#' onclick='"+ tweet.user +"'>" + tweet.user + "</a>";
"tweet.user" it should be javascript function name like below:
function showUserTweets(username) {
// write you logic here to get the user tweets by using his username;
}
hence you code will look like something below:
var userLink = "<a href='#' onclick='showUserTweets(\""+ tweet.user +"\")'>" + tweet.user + "</a>";
Note: You tweet.user must return String value. For object you have convert your object into JSON string by using JSON.strigify(object) method.
Hope it helps you!

Answer 2

As i found that you passing a variable to the onclick. which is not a valid method. such that tweet.user is not a valid method.
var displayTweet = function(tweet) {
var $tweet = $('<div></div>');
var userLink = "<a href='#' onclick='"+ tweet.user +"'>" + tweet.user + "</a>";
$tweet.html('#' + userLink + ': ' + tweet.message + ' ' + tweet.created_at);
$('#tweetContainer').prepend($tweet);
};
Here i am writing to solution:
Firstly create a function
function yourFunction(){
// do your stuff
}
Then you can call using one of the following replace your line :
var userLink = "<a href='#' onclick='"+ tweet.user +"'>" + tweet.user + "</a>";
to this
var userLink = "<a href='javascript:void(0);' onclick='yourFunction('+"'"+ tweet.user +"'"+")'>" + tweet.user + "</a>";
OR
var userLink = "<a href='javascript:yourFunction('+"'"+tweet.user+"'"+');'
and remove your these function