將 object 傳遞給 javascript 中的 function 時未捕獲的語法錯誤

Question

我有以下 function 有一個按鈕，當單擊該按鈕時，它會觸發另一個 function。

function navbar(id,CSVdata) {
        if(CSVdata){
           console.log('CSVdata',CSVdata)
           return `<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a id="downloadcsv${id}" class="dropdown-item" href="#" onclick="downloadCSV(${id},${CSVdata})">Download CSV</a>
                   </div>
            `;
        }
 }

function downloadCSV(id,data) {
    console.log("downloadcsv",data);
}

問題是當我控制台我的CSVdata數據時，它在控制台中正確顯示。 當我嘗試將它傳遞給我的downloadCSV function 時，我收到一個錯誤，因為Uncaught SyntaxError:Unexpected identifier並且傳遞的 object 顯示為downloadCSV(lc,[object Object])這里可能是什么問題？ 我嘗試對 object 進行字符串化，但仍然出現相同的錯誤。

Answer 1

要將 object 傳遞給內聯處理程序，您必須為 HTML 標記對其進行序列化。 但這非常丑陋。 內聯處理程序是不好的做法（部分原因是您遇到的問題） - 現在沒有真正的理由使用它們。 相反，使用 JavaScript 和addEventListener正確添加監聽器：

function navbar(id,CSVdata) {
    if(!CSVdata) return;
    const fragment = new DocumentFragment();
    fragment.innerHTML = `
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a id="downloadcsv${id}" class="dropdown-item" href="#">Download CSV</a>
        </div>
    `;
    fragment.querySelector('a').addEventListener('click', () => {
        downloadCSV(id, CSVdata);
    });
    return fragment;
}

Answer 2

我認為您正在嘗試將 object 作為參數傳遞到內聯 JavaScript function 調用中。 我強烈建議嘗試其他方法，因為幾乎可以肯定有更好的方法，但如果您想嘗試它，您可以將 object 編碼為 JSON 字符串，然后再將其組合到 ZFC35FDC70D5FC69D269883A822C7A5E 代碼中。

function navbar(id,CSVdata) {
        if(CSVdata){
           console.log('CSVdata',CSVdata)
           return `<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a id="downloadcsv${id}" class="dropdown-item" href="#" onclick='downloadCSV(${id},${JSON.stringify(CSVdata)})'>Download CSV</a>
                   </div>
            `;
        }
 }

function downloadCSV(id,data) {
    console.log("downloadcsv",data);
}