How to add id into onclick event in javascript

Question

Hi this is my code :

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();

I am trying to add idProduct into buybutton class but, I can not add a variable in this way...

Please show me how Can I repair it

Follow the same pattern you're using for other replacements, like name, price, count, etc.; `${variable}`. So `onclick="api.delete(${idProduct})"`. — Heretic Monkey, Jan 06 '20 at 15:39
using `onClick` inline in HTML is not a good practice [see here](https://stackoverflow.com/questions/5871640/why-is-using-onclick-in-html-a-bad-practice) — Nicolas, Jan 06 '20 at 16:36

score 0 · Answer 1 · answered Jan 06 '20 at 15:41

0

You need to close your beginning th tag and end your data string before adding the id variable.

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

answered Jan 06 '20 at 15:41

Travieso

427
3
13

Matt Croak · Answer 2 · 2020-01-06T15:49:18.017

0

You need to interpolate your value for idProduct using ${}.

<th <button class="buyButton"  onclick="api.delete(${idProduct})">

Otherwise you are passing 'idProduct' as a string.

edited Jan 06 '20 at 15:49

answered Jan 06 '20 at 15:41

Matt Croak

2,788
2
17
35

Don't change the quotes around the `onclick` attribute; they were fine as-is. – Heretic Monkey Jan 06 '20 at 15:44
@HereticMonkey I noticed that as well and made the change. – Matt Croak Jan 06 '20 at 15:49

karkael · Answer 3 · 2020-01-06T16:02:22.627

Here is your code rewritten:

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;
    })
};

Make sure you understand difference between ES5 and ES6, and please choose only one about to improve readability.
Remember to close your nodes like <th>.
Nodes type <th> are using for header cells, never in the body (please use CSS to bold it)
Finally remember node.innerHTML = "<some html>"; is not recommanded, please create nodes or edit them!

After that, I would be happy to become your teammate. :)

Please don't share code only on an external site. All code should be available on Stack Overflow, with a link as supplementary information. — Heretic Monkey, Jan 06 '20 at 16:00

How to add id into onclick event in javascript

3 Answers3