Question

我想尝试将record.ItemID传递给我的onclick = buy（）函数。但是我收到诸如“ Uncaught SyntaxError：输入意外结束”之类的错误

我尝试过\“ 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

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

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

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

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

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

但是通常来说，如果您必须以字符串形式构建HTML，则最好不要使用字符串插值。它使它更易于阅读，并且不易出现此类问题。

示例：

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

Answer 2

onclick的常规格式为

onclick="function_name(variable)"

在这种情况下，您可以执行以下操作：

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>';

Answer 3

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

您尝试执行的操作有很多不同的方法，这些方法在生产代码中会更安全，因此，当您对特定问题有一些答案时，请考虑以下更惯用的替代方法：< / p>

您可以使用链接（<a>）代替按钮，并使用CSS使链接看起来像按钮。这样完全避免了点击处理程序。
您可以使用data attributes以安全的方式存储记录，然后通过click事件访问记录，例如e.target.dataset.recordId。
您可以使用jQuery或类似的工具包来创建按钮，然后将功能附加到按钮上作为点击处理程序。

当您像在问题中一样直接创建HTML时，您将打开code injection之前的代码，恶意软件可以在其中伪造数据来窃取您网站用户的私人信息。使用库直接构建HTML而不是使用字符串构建更安全。

Answer 4

真的，分离内联JS并使用事件侦听器将元素定位到目标类要好得多。

这是一个简单的示例，向您展示如何实现：

const records = [{ itemId: 1 }, { itemId: 2 }, { itemId: 3 }];
const imgRoot = 'https://dummyimage.com/30x30/676767/fff.png?id=';

// `map` iterates over the array and produces one element of HTML per record
// We use a class on the button to identify it, and a data attribute
// button to hold the itemId
const html = records.map(({ itemId }) => {
  return `
    <div class="itemWrapper">
      <img class="item" src="${imgRoot}${itemId}" />
      <button data-itemid="${itemId}" class="buyRecord">Buy record</button>
    </div>
  `;
});

document.querySelector('.root').innerHTML = html.join('');
 
// We grab the buttons and iterate over them attaching
// event listeners that call `handleBuy` when the button is clicked
const buyButtons = document.querySelectorAll('.buyRecord');
buyButtons.forEach(button => button.addEventListener('click', handleBuy, false));

function handleBuy(e) {

  // Destructure the itemid from the dataset of the button
  // click event
  const { target: { dataset: { itemid } } } = e;
  console.log(itemid);
}

<div class="root" />

文档

如何将变量传递给onclick函数

4 个答案: