zibinsky
@zibinsky

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

Помогите, пожалуйста, с проблемкой. Аналог тудушки. Вызываю окно с инпутами, записываю туда данные, нажимаю кнопку "Сохранить". Новая строка с данными появляется. Но вот при следующем вводе новая строка не добавляется, а данные становятся NAN (строковые значения - undefined).
Как исправить, чтобы строка с новыми данными появлялась, а данные в каждой строке отображались корректно?
Код лежит здесь: https://codepen.io/jurij-zibinskij/pen/xxRaajx
  • Вопрос задан
  • 88 просмотров
Решения вопроса 1
@slide13
frontend/web-developer
Потому что элементы инпутов селектятся у вас только один раз, а потом переменные с этими инпутами перезаписываются внутри 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>
`;

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы