How delete elem in cell?

May 10, 2023

Code Otput after atempt add cell: Uncaught TypeError: Cannot read properties of undefined (reading ‘addEventListener’)

let name   = document.querySelector('#name');
let price  = document.querySelector('#price');
let amount = document.querySelector('#amount');
let add    = document.querySelector('#add');
let table  = document.querySelector('#table');
let total  = document.querySelector('#total');

function createCell(tr, value, name) {
    let td = document.createElement('td')
  td.textContent = value
  td.classList.add(name)
  tr.append(td)
}

add.addEventListener('click', function() {
    let tr = document.createElement('tr');
    createCell(tr, name.value, 'name');
    createCell(tr, price.value, 'price'); 
    createCell(tr, amount.value, 'amount');
    createCell(tr, price.value * amount.value, 'cost');
    createCell(tr, 'delete', 'remove').addEventListener('click', function(ev) {
      ev.target.closest('tr').remove()
  })
    table.appendChild(tr);
  recountTotal()
});

>Solution :

As error says, you’re trying to call addEventListener on undefined value.
It means that createCell doesn’t return anything.

To resolve the issue you have to return td you’ve created inside.
So your updated function should look like this:

function createCell(tr, value, name) {
  let td = document.createElement('td')
  td.textContent = value
  td.classList.add(name)
  tr.append(td)  

  return td
}