How can I pass my dynamically-generated variable to the function inside the innerHTML of a javascript function?

Question

On my site, I use an onclick event on a link to call a javascript function (links are located within a WHILE loop from an external php file). The onclick from within the php WHILE loop passes the user picture and a username to a javascript function called ShowUser(). The event correctly generates a username and photo and places it within the innerHTML of a div as follows:

<script language="javascript" type="text/javascript">
function ShowUser(userpic,username) {
var TitleDesc1 = 'Click this photo to learn more about '+username+'';
document.getElementById('UserPicHolder').innerHTML = '<img class="TipTip"    
title="'+TitleDesc1+'" src="'+userpic+'" style="width:60px; height:66px" alt="user  
picture">';
}
</script>

This works correctly. However, when I try to make the user picture clickable (onclick #2) (by adding a href) to show the user's site statistics the function does not open the Stats Box (a div that should be hidden until the onclick#2 (DisplayUserStats) WITHIN the javascript function):

<script language="javascript" type="text/javascript">
function ShowUser(userpic,username) {
var TitleDesc1 = 'Click this photo to learn more about '+username+ '';
document.getElementById('UserPicHolder').innerHTML = '<a href="#null"    
onclick="DisplayUserStats("'+username+'")"><img class="TipTip" title="'+TitleDesc1+'"    
src="'+userpic+'" style="width:60px; height:66px" alt="user picture"></a>';
}
</script>

The user's Stats Box div becomes visible, as expected, when the function DisplayUserStats() is empty (as DisplayUserStats() ), but of course the stats are undefined since no username has been defined. It's only when seemingly ANY content is placed inside DisplayUserStats() that the Stats Box div does not open (e.g. DisplayUserStats(dummystring) does not open the Stats Box div. Note that I have tried several other concatenations (thinking I did this incorrectly), for example, +username+ '+username+' username etc. Could someone please shed some light on how the variable username can be passed to the function DisplayUserStats()?

It's really hard to tell what it is you're trying to do here. — Pointy
– Pointy, Commented Nov 13, 2013 at 21:04
I want to pass username to the function DisplayUserStats(). I can pass username to functions called outside of the innerHTML but I cannot seem to pass username to DisplayUserStats(), a function which is called inside the innerHTML. — The One and Only ChemistryBlob
– The One and Only ChemistryBlob, Commented Nov 13, 2013 at 21:11
OK well check @bfavaretto's answer - also if that line with the updated content is really broken across several lines in your real source, well, you can't do that. — Pointy
– Pointy, Commented Nov 13, 2013 at 21:15

bfavaretto · Accepted Answer · 2013-11-13 21:16:02Z

2

It would really look cleaner if didn't use inline event handlers. But the problem is that you have double quotes inside double quotes (thus broken HTML):

<a href="#null" onclick="DisplayUserStats("SomeUsername")">...

You can fix that with this ugly thing:

onclick="DisplayUserStats(\''+username+'\')">

Also, don't break lines when defining JavaScript strings, or the code will fail.

edited Nov 13, 2013 at 21:16

answered Nov 13, 2013 at 21:06

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pointy Over a year ago

It looks like that string constant (the content string) is broken over a couple lines ...

The One and Only ChemistryBlob Over a year ago

Thanks bfavaretto...it worked perfectly. One question: I have read in many places exactly the same thing as you said about breaking lines with Javascript strings. However (and I don't doubt what you are saying) I have broken this "rule" multiple times in my code and the code still seems to work correctly in every browser. Any thoughts on why this could be the case?

bfavaretto Over a year ago

@ChemBlob9999 Are you sure? This simple example surely breaks (open your console to see the error).

Collectives™ on Stack Overflow

How can I pass my dynamically-generated variable to the function inside the innerHTML of a javascript function?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related