javascript within javascript, passing variables

Question

I have a JavaScript function within a JavaScript function. The JavaScript below inserts some HTML in a div using getElementbyID.

It is passing one variable okay--that seems to be a child of an object, this.value--btw, I am a JavaScript newb, however, when I try to give it another variable to pass, the string represented by l it stops working. Below type 1 which tries to pass variable l does not work, else, does. I have also just tried putting l '+ but that did not work. Can anyone help me with proper syntax for passing variables?. Thank you.

if (type==1)
 {
 var mailbox = '<form action="mail.php" method="post"><input type="text" onkeyup="showResult(this.value,'+l+')"><input type="submit" name="submit" value="Email"><div id="livesearch"></div></form>';
 }
else
 {
 var mailbox = '<form action="share.php" method="post"><input type="text" onkeyup="showResult(this.value)"> Share<div id="livesearch"></div></form>';
 } 
document.getElementById(target).innerHTML = mailbox;
return false;
}

• Felix Kling: The proper way would be to create proper DOM elements where you assign the event handlers to. What is l?
• user1260310: just a string such as a message.
• Jacob: What's an example of what l can contain?
• user1260310: "Bob, check this out." I would rather not have to pass these variables but my understanding is that the only way to get a string that exists on a page outputted from the server into javascript for use on client side is by passing it as an argument of the function.
• Felix Kling: Well if it is a string, then you are creating invalid code. if l = "foo bar" then the function call becomes showResult(this.value,foo bar).

Answer 1

If the string contains "Check this out." with the double quotes, this is what the resulting HTML markup would look like (with formatting added):

<form action="mail.php" method="post">
 <input type="text" onkeyup="showResult(this.value,"Check this out.")">
 <input type="submit" name="submit" value="Email">
 <div id="livesearch"></div>
</form>

Note how the attribute value for onkeyup contains a ", which would close out the attribute, resulting in invalid HTML. If the string contains Check this out. without any quotes, the end result is still invalid, for another reason:

<form action="mail.php" method="post">
 <input type="text" onkeyup="showResult(this.value,Check this out.)">
 <input type="submit" name="submit" value="Email">
 <div id="livesearch"></div>
</form>

In this case, showResult(this.value,Check this out.) is the event handler JavaScript, and that has a syntax error. What you want is for the string to be in single quotes so it doesn't break the attribute and so it's valid JavaScript:

var mailbox = '<form action="mail.php" method="post"><input type="text" onkeyup="showResult(this.value,\''+l+'\')"><input type="submit" name="submit" value="Email"><div id="livesearch"></div></form>';

Note that it is not recommended to attach events in this way because it's so easy to make this type of mistake. Rather, assign an event handler to the DOM element, not HTML:

var mailboxHtml;
var keyUpHandler;
if (type==1)
{
 mailboxHtml = '<form action="mail.php" method="post"><input type="text" id="search"><input type="submit" name="submit" value="Email"><div id="livesearch"></div></form>';
 keyUpHandler = function() { showResult(this.value, l); };
}
else
{
 mailboxHtml = '<form action="share.php" method="post"><input type="text" id="search"> Share<div id="livesearch"></div></form>';
 keyUpHandler = function() { showResult(this.value); };
} 
document.getElementById(target).innerHTML = mailbox;
document.getElementById('search').onkeyup = keyUpHandler;
return false;

• Esailija: That's what I'm talking about! :)
• user1260310: This worked! I actually have to pass several variables such as an email address and so forth, so I guess I will escape each of them. The dom sounds like a better way to go down the road but I'm already a bit over my head with this.

Answer 2

If l is a string, you need to make it look like a string in the rendered code.

You can use JSON.stringify() for this (and indeed any type of variable, including objects!).

'..... onkeyup="showResult(this.value,'+JSON.stringify(l)+');" .....'

• Niet the Dark Absol: Because this is what the OP was asking for?
• Esailija: :| where does he specifically say that he needs to have a html string event listener?
• Niet the Dark Absol: Personally, I would add the event listener in code. But that's because I'm experienced enough to know about how closure work and what steps to take to ensure that the variables I use aren't reused elsewhere. Not everyone can.
• Esailija: Not sure where you need deep knowledge of closures to use a normal event listener in javascript as opposed to dynamic html listeners which are full of "traps" like this
• user1260310: I tried the JSON.stringify and it did not work...Still checking if I have a typo or something