button in table is showing up as [object HTMLButtonElement]

Question

I'm making an expense tracker and am running into an issue with the Delete Button. The delete button in my table does not show up when a new is created from the form. instead, where the button should be, [object HTMLButtonElement] shows up in its place.

const submitButton = document.getElementById("submit-button");
submitButton.addEventListener('click', userData);

function userData(e) {
  e.preventDefault();
  const payment = document.getElementById("payment-type").value
  const amountPaid = document.getElementById("amount").value
  const itemPurchased = document.getElementById("expense").value
  const datePurchased = document.getElementById("date").value
  const tableData = document.getElementById("table-body");
  const deleteExpense = document.createElement('button');
  deleteExpense.setAttribute('id', 'deleteButton');
  deleteExpense.textContent = 'Delete';
  let newRow = `
    <tr>
      <td>${payment}</td>
      <td>${amountPaid}</td>
      <td>${itemPurchased}</td>
      <td>${datePurchased}</td>
      <td>${deleteExpense}</td>
    </tr>
`
  tableData.innerHTML += newRow;

}

function deleteTableData(e) {
  const deleteData = e.target.parentElement;
  deleteData.remove();
}

An HTMLButtonElement (what is created from `document.createElement('button')`) cannot be directly output into a string. In this case you could write the button contents as a string: `deleteExpense = ''` — shamsup, Oct 01 '20 at 17:08

score 0 · Accepted Answer · answered Oct 01 '20 at 17:11

deleteExpense is a DOM element. You can't substitute a DOM element in to a string, it gets converted to a string showing the element type (see What does [object Object] mean?).

Set deleteExpense to the HTML for the button rather than creating a button object.

const deleteExpense = "<button class='deleteButton'>Delete</button>";

I changed the ID to a class, because IDs should be unique.

button in table is showing up as [object HTMLButtonElement]

1 Answers1