未捕获的语法错误：意外的标识符（当我在添加函数中通过未捕获的语法错误将对象作为参数传递时）

Question

在此代码中，当我在 add 函数中传递一个对象作为参数时，它抛出了 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();

Answer 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>

但是，我建议您使用按钮元素而不是字符串。因此，您不需要任何额外的魔法，并且代码更具可读性：

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>