Передача параметра в виде строки, содержащей белые пробелы в функции javascript onclick

Question

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

Если я передаю строку partId без пробелов, она работает нормально. Но если я прохожу 'MRF 01', это дает мне

Uncaught SyntaxError: Unexpected token ILLEGAL.

Почему это и как я могу исправить это?

Answer 1

Использовать   всякий раз, когда вы передаете пространство как параметр функции. Если вы используете js для генерации onclick, используйте encodeURIComponent.

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

Answer 2

Если значение атрибута HTML должно содержать пробел, вам необходимо использовать кавычки для разграничения значения.

Обратите внимание на подсветки синтаксиса здесь:

<span foo=bar baz ></span> 

Это атрибут foo со значением "bar" и булевой атрибут baz.

С другой стороны, этот

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

является атрибутом foo со значением "bar baz". Обратите внимание, как baz подсвечивается по-другому?

Чтобы исправить вашу проблему, поставьте кавычки вокруг значения onclick или лучше, use a different way to bind the event handler.

Answer 3

Я предпочел бы изменить организацию цитат, чтобы получить более чистый код. Это будет делает его более удобным для чтения, а также более традиционные (в моей точки зрения):

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;

Еще более обычным будет следовать Felix Kling's wisdom (последняя строка).