如何将变量传递给 onclick 函数

Question

我想尝试将 record.ItemID 传递给我的 onclick = buy() 函数。但我收到类似“Uncaught SyntaxError: Unexpected end of input”之类的错误我试过 \"record.ItemID \" 但那当然只是通过了 result.name 的文字字符串我也试过 (\'' + record.ItemID + '\') 但得到相同的语法错误function showShop(items) {   let tableContent = "<tr class='orderTitle'><td =imgTable></td><td id = contentTable ></td></tr>\n";   let odd = true;   const addRecord = (record) => {    tableContent += odd ? "<tr class='orderOdd'>" : "<tr class='orderEven'>";      odd = !odd;      tableContent += "<td>" + "<img id = image src="+ "http://redsox.uoa.auckland.ac.nz/ms/MuseumService.svc/shopimg?id=" + record.ItemId  + " />" +  "</td><td id = content>" + record.Description + "<td><button  onclick='buy("+ record.ItemId +")'/> Buy </button></td>";   }   items.forEach(addRecord)   document.getElementById("shop").innerHTML = tableContent;}function buy(item){  window.open('http://redsox.uoa.auckland.ac.nz/mss/Service.svc/buy?id='+ item,'_self');}

Answer 1

我不确定这是否会解决您的问题，但看起来您正在混淆's 和"s。

onclick='buy('record.ItemId')'

您将在onclick之后立即终止该属性buy(。

您可能需要执行以下操作：

onclick='buy(" + record.ItemId + ")'

不过一般来说，如果您必须在字符串中构建 HTML，最好不要使用字符串插值。它使阅读更容易，并且不太容易出现这些类型的问题。

例子：

const html = `<button onclick="buy(${record.ItemId})">Click</button>`;

Answer 2

看起来您正在尝试构建一些 HTML 内容以放入表格中，并且您希望将某些行为附加到表格内的按钮上，以便在您单击它时打开一个新窗口。

您尝试执行的操作有多种不同的方法，这些方法在生产代码中会更安全，因此，虽然您对特定问题有一些答案，但请考虑这些更惯用的替代方法：

1. 您可以使用链接 ( <a>) 代替按钮，并使用 CSS 使链接看起来像按钮。这根本不需要点击处理程序。

2. 您可以使用数据属性以安全的方式存储记录，然后从单击事件访问它，例如e.target.dataset.recordId。

3. 您可以使用 jQuery 或类似的工具包来创建按钮，然后将一个函数作为点击处理程序附加到按钮上。

当您像在问题中一样直接创建 HTML 时，您将代码暴露在代码注入中，恶意人员可以在其中制作数据，从而窃取您网站用户的私人信息。使用库直接构建 HTML 比在字符串中构建要安全得多。