Pass Parameters to JavaScript Function From Generated HTML

Question

I have an AJAX program which gets data from the website and posts the info to Facebook. My problem is quite simple. I need to generate HTML in the callback function. Here is a button:

var city = "Beijing";
html+= "<td><input type=button value=FACEBOOK onclick=\"fb("+city+")\"></td>";
document.getElementById("myDiv").innerHTML = html;

Say I have the variable "city", and it has certain value. By generating the button like above, I cannot pass the city to the function fb(city). It even wouldn't invoke that function. However, it works if I remove the parameter.

elrado · Accepted Answer · 2012-04-10 05:05:24Z

2

var city = "Beijing";
html+= "<td><input type=button value=FACEBOOK onclick=\"fb('"+city+"')\"></td>";
document.getElementById("myDiv").innerHTML = html;

you forgot SINGLE QUOTES :).

NOT fb("+city+") than generates fb(Beijing)

BUT fb('"+city+"') than generates fb('Beijing').

answered Apr 10, 2012 at 5:05

elrado

5,3321 gold badge19 silver badges15 bronze badges

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

Comments

Mingliang · Accepted Answer · 2012-04-10 05:10:50Z

1

when you functions get processed, Since city will be replaced as "Beijing", the html fragment will be generated like:

<td><input type=button value=FACEBOOK onclick="fb(Beijing)"></td>

As you can see here, Beijing doesn't have a "" around it. So it will be treated as a variable and which doesn't really exist.

The simplest fix might be :

html+= "<td><input type=button value=FACEBOOK onclick=\"fb('" + city + "')\"></td>";

Actually there are many other better ways to achieve your purpose. And you should bind the 'click' event from a javascript code rather than add it inline in html. And by binding it from a javascript function, actually you can embed the value in a closure.

answered Apr 10, 2012 at 5:10

Mingliang

791 silver badge6 bronze badges

2 Comments

jamesmortensen Over a year ago

Ming, do you have an example of the closure? I think that might be worth documenting. Then the op can decide which technique to use. :)

jamesmortensen Over a year ago

+1 - I think this is great advice. When you keep your JavaScript out of your HTML and your HTML out of your JavaScript, the result is much more maintainable code.

jamesmortensen · Accepted Answer · 2012-04-10 05:10:03Z

The string within a string within a string technique is something you'll eventually outgrow. A better technique is to use the onclick property to assign the click event:

var city = "Beijing";
var td = document.createElement("td");
var input = document.createElement("input");
input.setAttribute("type","button");
input.setAttribute("value","FACEBOOK");
input.onclick = function() {
    fb(city);
};

td.appendChild(input);
document.getElementById("myDiv").appendChild(td);

Not only does this eliminate the unreadability of strings within strings, but it also ensures that the DOM nodes you add to your #myDiv element will be recognized by JavaScript in the DOM. Some browsers have trouble programmatically recognizing DOM elements that are added using innerHTML. I've experienced that behavior in Firefox and XUL-based browsers.

As an aside, jQuery can perform this operation a lot smoother and guarantees cross-browser compatibility, but that's a question for the jQuery tag.

Collectives™ on Stack Overflow

Pass Parameters to JavaScript Function From Generated HTML

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related