时间戳

首页 > 解决方案 > 如何在javascript中将id添加到onclick事件中

javascript - 如何在javascript中将id添加到onclick事件中

问题描述

嗨，这是我的代码：

window.onload = () => {
    main.makeList();
};

Main.prototype.makeList = function () {
    api.getAll().then(tableData => {
        const tableBody = document.getElementById("tableData");
        let dataHtml = "";
        let idProduct;
        for (let i in tableData) {
            idProduct = tableData[i]._id;
            dataHtml +=
                `<tr><td>${tableData[i].data.name}</td>` +
                `<td>${tableData[i].data.price}</td>`
                + `<td>${tableData[i].data.count}</td>` +
                `<td><img src="${tableData[i].data.picture}" >

                <th <button class="buyButton"  onclick="api.delete(+idProduct+)">Delete</button></th>

</tr>`;


        }
        tableBody.innerHTML = dataHtml;
    })
};
const main = new Main();
const api = new Api();

我正在尝试将 idProduct 添加到 buybutton 类中，但是我无法以这种方式添加变量...

请告诉我如何修复它

标签： javascript

解决方案

这是您重写的代码：

https://codepen.io/Karkael/pen/VwYyXyJ

Main.prototype.makeList = function () {
    api.getAll().then(tableData => {
        const tableBody = document.getElementById("tableData");
        let dataHtml = "";
        let idProduct;
        for (let i in tableData) {
            idProduct = tableData[i]._id;
            dataHtml += `
  <tr>
    <td>${tableData[i].data.name}</td>
    <td>${tableData[i].data.price}</td>
    <td>${tableData[i].data.count}</td>
    <td><img src="${tableData[i].data.picture}">
    <td>
      <button class="buyButton"  onclick="api.delete(${idProduct})">Delete</button>
    </td>
  </tr>`;
        }
        tableBody.innerHTML = dataHtml;
    })
};
  1. 请确保您了解 ES5 和 ES6 之间的区别，并且请仅选择其中一项以提高可读性。
  2. 请记住关闭您的节点，例如<th>.
  3. 节点类型<th>用于标题单元格，从不在正文中（请使用 CSS 加粗）
  4. 最后记住node.innerHTML = "<some html>";不推荐，请创建节点或编辑它们！

在那之后，我很乐意成为你的队友。:)

推荐阅读