"<button onclick=editRecords('" + partId + "')>Add Quantity</button>";

If I pass the partId string without spaces, it's working fine. But if I pass 'MRF 01', it gives me

Uncaught SyntaxError: Unexpected token ILLEGAL.

Why is this and how can I fix that?

"<button onclick=editRecords('" + partId + "')>Add Quantity</button>";

If I pass the partId string without spaces, it's working fine. But if I pass 'MRF 01', it gives me

Uncaught SyntaxError: Unexpected token ILLEGAL.

Why is this and how can I fix that?

• javascript
• html

• 1 Shouldn’t this be "<button … onclick='editRecords(\'" + partId + "\')'> …"? – Sebastian Simon Commented Jun 21, 2015 at 4:11
• It gives Uncaught SyntaxError: Unexpected token } – Gurpinder Commented Jun 21, 2015 at 4:15
• 2 Why? You could post some more of your code. I don’t know what else is interfering. – Sebastian Simon Commented Jun 21, 2015 at 4:16
• If i undo your code its working for string without spaces. – Gurpinder Commented Jun 21, 2015 at 4:20

5 Answers 5

Use   whenever you pass space as a function parameter. If you are using js to generate onclick, use encodeURIComponent.

"<button onclick=editRecords('" + encodeURIComponent(partId) + "')>Add Quantity</button>";

From the poster himself. It's a primarily opinion based answer, there is nothing conventional in using single quotes (I have discovered C syntax and now I prefer double quotes...).

I would rather change the organisation of quotes in order to get a cleaner code. This will makes it more readable as well as more conventional (in my point of view):

var msg = 'Sometimes SO looks like a McDonalds drive through.';
var html = '<button onclick="clickHandler(\'' + msg + '\')">click me</button>';
function clickHandler (msg) { alert(msg); }
document.body.innerHTML = html;

Even more conventional would be to follow Felix Kling's wisdom (last line).

If an HTML attribute value is supposed to contain a space, then you have to use quotation marks to delimit the value.

Pay attention to the syntax highlight here:

<span foo=bar baz ></span>

This is an attribute foo with value "bar" and a boolean attribute baz.

On the other hand, this

<span foo="bar baz"></span>

is an attribute foo with value "bar baz". Notice how baz is highlighted differently?

To fix your issue, either put quotation marks around the value of onclick, or better, use a different way to bind the event handler.

I would suggest that this is the best option. You can set any attribute you want.

var e = document.createElement("span");
e.className = "close-li";
e.setAttribute('aria-hidden', 'true');
e.setAttribute('data-toggle', 'modal');
e.setAttribute('data-target', '#CreateModal');
e.setAttribute("onClick", "FunctionName(" + parameters + ");" );
e.innerText = "×";
$('#id').append(e);  //Id would be the place where you want to append. I used jquery so, I used append

String parameters with white space

<input type="button" onClick="return myFunction('10', 'your text hear')" />

or

PHP string variables with white space

<input type="button" onClick="return myFunction('<?php echo $id ?>', '<?php echo $designation ?>')" />

JS Function

function setVisibility(id, designation) {...your js code hear...}