Блог

Главная - Вопросы по программированию - Uncaught SyntaxError: неожиданный идентификатор (когда я передаю объект в качестве аргумента в моей функции добавления через Uncaught SyntaxError)

Uncaught SyntaxError: неожиданный идентификатор (когда я передаю объект в качестве аргумента в моей функции добавления через Uncaught SyntaxError)

#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

  1. вам нужно создать строку из вашего объекта с помощью JSON.stringify ,
  2. вам нужно использовать одинарные кавычки для функции.

Это работает:

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

теперь вы можете видеть, что вы используете двойные кавычки в двойных кавычках.

Это будет исправлено, если вы измените двойную кавычку на одинарную кавычку.