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;
}

The proper way would be to create proper DOM elements where you assign the event handlers to. What is l? — Felix Kling
– Felix Kling, Commented Jun 8, 2012 at 19:26
"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. — user1260310
– user1260310, Commented Jun 8, 2012 at 19:32
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). — Felix Kling
– Felix Kling, Commented Jun 8, 2012 at 19:36

Jacob · Accepted Answer · 2012-06-08 19:41:50Z

3

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;

answered Jun 8, 2012 at 19:41

Jacob

79k24 gold badges159 silver badges245 bronze badges

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

2 Comments

Esailija Over a year ago

That's what I'm talking about! :)

user1260310 Over a year ago

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.

Niet the Dark Absol · Accepted Answer · 2012-06-08 19:29:17Z

0

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)+');" .....'

answered Jun 8, 2012 at 19:29

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

5 Comments

Niet the Dark Absol Over a year ago

Because this is what the OP was asking for?

Esailija Over a year ago

:| where does he specifically say that he needs to have a html string event listener?

Niet the Dark Absol Over a year ago

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 Over a year ago

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 Over a year ago

I tried the JSON.stringify and it did not work...Still checking if I have a typo or something

Collectives™ on Stack Overflow

javascript within javascript, passing variables

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related