Почему строка в DOM не добавляется, а данные становятся NAN?

Question

[Юрий]

Помогите, пожалуйста, с проблемкой. Аналог тудушки. Вызываю окно с инпутами, записываю туда данные, нажимаю кнопку "Сохранить". Новая строка с данными появляется. Но вот при следующем вводе новая строка не добавляется, а данные становятся NAN (строковые значения - undefined).
Как исправить, чтобы строка с новыми данными появлялась, а данные в каждой строке отображались корректно?
Код лежит здесь: https://codepen.io/jurij-zibinskij/pen/xxRaajx

Answer 1

[Алексей]

Потому что элементы инпутов селектятся у вас только один раз, а потом переменные с этими инпутами перезаписываются внутри btnNoteSave.addEventListener на значение этих самых инпутов. Соответственно, при повторном клике в inputName и т.д. у вас уже нет элемента дом дерева, а есть значения инпутов предыдущие.
Поэтому т.к. у строки нет свойства value, поэтому в первой колонке будет undefined, а в остальных колонках приведение undefined к числу будет NaN.

Создайте новые переменные внутри btnNoteSave.addEventListener чисто под значения инпутов и используйте уже их:

const inputNameValue = inputName.value;
const inputLineValue = +inputLine.value;
const inputTimeValue = +inputTime.value;
const inputCostValue = +inputCost.value;
....
tableLine.innerHTML = `
  <td id="project-name">${inputNameValue}</td>
  <td id="project-line">${inputLineValue}</td>
  <td id="project-time">${inputTimeValue}</td>
  <td id="project-cost">${inputCostValue}</td>
`;

Я бы в целом по другому сделал, но это уже к вопросу отношения не имеет

Comments

[Юрий]

Понял, большое спасибо!