如何将变量传递给 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("&nbsp;+&nbsp;record.ItemId&nbsp;+&nbsp;")'不过一般来说，如果您必须在字符串中构建 HTML，最好不要使用字符串插值。它使阅读更容易，并且不太容易出现这些类型的问题。例子：const&nbsp;html&nbsp;=&nbsp;`<button&nbsp;onclick="buy(${record.ItemId})">Click</button>`;

Answer 2

看起来您正在尝试构建一些 HTML 内容以放入表格中，并且您希望将某些行为附加到表格内的按钮上，以便在您单击它时打开一个新窗口。您尝试执行的操作有多种不同的方法，这些方法在生产代码中会更安全，因此，虽然您对特定问题有一些答案，但请考虑这些更惯用的替代方法：您可以使用链接 (&nbsp;<a>) 代替按钮，并使用 CSS 使链接看起来像按钮。这根本不需要点击处理程序。您可以使用数据属性以安全的方式存储记录，然后从单击事件访问它，例如e.target.dataset.recordId。您可以使用 jQuery 或类似的工具包来创建按钮，然后将一个函数作为点击处理程序附加到按钮上。当您像在问题中一样直接创建 HTML 时，您将代码暴露在代码注入中，恶意人员可以在其中制作数据，从而窃取您网站用户的私人信息。使用库直接构建 HTML 比在字符串中构建要安全得多。