Pass a string parameter in an onclick function

JasperTack picture JasperTack · Mar 10, 2012 · Viewed 945.8k times · Source

I would like to pass a parameter (i.e. a string) to an Onclick function.

For the moment, I do this:

'<input type="button" onClick="gotoNode(' + result.name + ')" />'

with result.name for example equal to string "Add".

When I click on this button, I have an error that says that "Add is not defined". Since this function call works perfectly with a numeric parameter, I assume that it has something to do with the symbols "" in the string.

How can I fix this problem?

Answer

david picture david · Mar 10, 2012

It looks like you're building DOM elements from strings. You just need to add some quotes around result.name:

'<input type="button" onClick="gotoNode(\'' + result.name + '\')" />'

You should really be doing this with proper DOM methods though.

var inputElement = document.createElement('input');
inputElement.type = "button"
inputElement.addEventListener('click', function(){
    gotoNode(result.name);
});

​document.body.appendChild(inputElement);​

Just be aware that if this is a loop or something, result will change before the event fires and you'd need to create an additional scope bubble to shadow the changing variable.