Редактируемые строки в JS + HTML

Обычно в JS я не лезу, но тут пришлось изучить(в проект добавить, и скажу достаточно интересная штука). Так вот, мне надо генерировать HTML код(табличку), вроде всё хорошо, но есть одно НО. В HTML вызывается JS функция, в которую передаётся переменная(обычный текст). Если текст без пробелов, то всё нормуль, но если появляются пробелы, то начинается, что то не понятное, может кто разъяснит что я не так делаю) Код и ошибка:

Код для создания таблички

for (var i = 0; i < Object.keys(obj['warehouse_client_info']).length + 1; i++){

                        click_data = `'ordering|${obj['warehouse_client_info'][i][0]}|${obj['warehouse_client_info'][i][2]}'`;
                        console.log(click_data)
                        document.getElementById("table_info").innerHTML += `<tr><td id='name'>${obj['warehouse_client_info'][i][0]}</td><td id='count'>${obj['warehouse_client_info'][i][1]}</td><td><a onclick=order(${click_data})>Заказать</a></td><tr>`;
                    }

Код функции для отправки POST запроса на сервер

function order(text){
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'http:/IP/index', false);
            console.log(text)
            xhr.send([String(text)]);
            if (xhr.status != 200) {
                console.log(xhr.status);
            } else {
                console.log('!OK!')
                alert('Ваш запрос успешно отправлен')
            }

        };

Фоточки:

Ошибка в консольке HTML

На 2 скрине, видно что появляются ковычки, хотя их нигде нет, откуда они и как их убрать, а то JS думает что это переменные.

Заранее спасибо! Всем успешной трудовой недели!


Ответы (1 шт):

Автор решения: Ein

Такое происходит из-за того, что вы генерируете невалидный html, а браузер пытается его починить.

Значения аттирбутов должны быть обёрнуты в двойные кавычки.

let html = `<a onclick="order(${click_data})">Заказать</a>`
                       ^                    ^
→ Ссылка