在javascript的onclick函数中将参数作为包含空格的字符串传递

Question

"<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?

Answer 1

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

Answer 2

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).

Answer 3

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 .

Answer 4

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

Answer 5

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