#javascript
#javascript
Вопрос:
В этом коде, когда я передаю объект в моей функции добавления в качестве аргумента, он выдает Uncaught SyntaxError:
const searchResultsList = document.getElementById('searchResultsList');
function add(obj) {
console.log(obj);
}
function showResult() {
const li = document.createElement('LI');
const obj = { abc: "xyz" }
li.innerHTML = `<button onclick="add(${obj})">Favourites</button>`;
searchResultsList.appendChild(li);
}
showResult();
Ответ №1:
В вашем коде есть две проблемы, поскольку вы используете строку на innerHTML
- вам нужно создать строку из вашего объекта с помощью
JSON.stringify
, - вам нужно использовать одинарные кавычки для функции.
Это работает:
const searchResultsList = document.getElementById('searchResultsList');
function add(obj) {
console.log(obj);
}
function showResult() {
const li = document.createElement('LI');
const obj = {abc: "xyz"}
li.innerHTML = `<button onclick='add(${JSON.stringify(obj)})'>Favourites</button>`;
searchResultsList.appendChild(li);
}
showResult();
<ul id='searchResultsList'>
</ul>
Однако я бы посоветовал вам использовать элемент button вместо string. Таким образом, вам не нужна дополнительная магия, и код становится более читаемым:
const searchResultsList = document.getElementById('searchResultsList');
function add(obj) {
console.log(obj);
}
function showResult() {
const li = document.createElement('LI');
const button = document.createElement('button');
const obj = { abc: "xyz" }
button.textContent = 'Favourites';
button.addEventListener('click', () => add(obj));
li.appendChild(button);
searchResultsList.appendChild(li);
}
showResult();
<ul id="searchResultsList">
</ul>
Кроме того, чтобы упростить его повторное использование, я бы предложил добавить объект в качестве свойства данных:
const searchResultsList = document.querySelector('#searchResultsList');
function add() {
console.log(JSON.parse(this.dataset.obj));
}
function showResult() {
const li = document.createElement('LI');
const button = document.createElement('button');
button.textContent = 'Favourites';
button.dataset.obj = JSON.stringify({ abc: "xyz" });
button.addEventListener('click', add);
li.appendChild(button);
searchResultsList.appendChild(li);
}
showResult();
<ul id='searchResultsList'>
</ul>
Ответ №2:
Вы передаете объект непосредственно в строку, которая будет интерпретироваться как '[object Object]'
. Один из способов обойти это — создать свой <button/>
(точно так же, как вы создаете свой <li/>
).
const searchResultsList = document.getElementById('searchResultsList');
function add(obj) {
console.log(obj);
}
function showResult() {
const li = document.createElement('li');
const obj = {
abc: "xyz"
};
// Create button
const button = document.createElement('button');
button.textContent = 'Favourites';
button.onclick = () => add(obj);
// Add button to <li/>
li.appendChild(button);
// Add <li/> to searchResultsList
searchResultsList.appendChild(li);
}
showResult();
<ul id="searchResultsList"></ul>
Ответ №3:
Эй, я только что решил ту же проблему и понял разницу между «vs».
Попробуйте изменить свой объект
const obj = { abc: 'xyz' }
не
const obj = { abc: "xyz" }
Затем вы можете отправить объект в качестве параметров.
Вот причина
В Javascript вы не можете заключать двойные кавычки в кавычки doubule.
например) » «aa» » => (x) / » ‘aa’ » => (o)
Итак, посмотрите на этот код, который вы написали
li.innerHTML = `<button onclick="add(${obj})">Favourites</button>`;
onclikck = «» вы используете двойные кавычки, и ваш объект определяется следующим образом
const obj = { abc: "xyz" }
теперь вы можете видеть, что вы используете двойные кавычки в двойных кавычках.
Это будет исправлено, если вы измените двойную кавычку на одинарную кавычку.