Получаю в ответе NaN, хочу не Nan. Как исправить?

Question

[holllop]

Есть форма она по идеи должна обновляться и выводит новую форму с записью "Вы точно хотите удалить запись ?" и под надпись мини таблица с данными.

<form method="POST" class="formdel">
                    <button class="exit" class="exit" id="closeButton1">х</button>
                    <p>Введите или выберете порядковый номер записи, которую хотите удалить</p>
                    <div class="string">
                        <label for="id">№ П/П:</label>
                        <input type="number" id="id" name="id_k1" required>
                    </div>
                    <button type="submit" name="submit" class="dle">Удалить запись</button>
                </form>

Я сделал это так

fetch('http://:3000/mine_info')
  .then(response => response.json())
  .then(json => {
    const formDel = document.querySelector('.formdel');

    formDel.addEventListener('submit', (event) => {
      event.preventDefault();
      const id = parseInt(document.getElementById('id').value);
      console.log(id); 

      // Найти запись с соответствующим идентификатором в JSON
      const record = json.find((item) => item.id_k1 === id);
      
      // Обновить содержимое формы
      if (record) {
        wrapper1.innerHTML = 
        `<div>
          <p>Вы точно хотите удалить запись:</p> 
          <table>
            <tr>
              <th>Порядковый номер записи:</th>
              <th>Номер:</th>
              <th>Номер:</th>
              <th>Номер:</th>
              <th>Номер:</th>
              <th>Номер:</th>
            </tr>
            <tr>
              <td>${record.id_k1}</td>
              <td>${record.n_mine}</td>
              <td>${record.name_mine}</td>
              <td>${record.adress}</td>
              <td>${record.full_name_of_direcor}</td>
              <td>${record.phone_number}</td>
            </tr> 
          </table>
          <button type="submit" name="submit" class="dle">Удалить запись</button>
        </div>`;
      } else {
        console.log('Записи с таким ID не найдено');
      }
    });
  })
  .catch(error => {
    console.error('Произошла ошибка:', error);
});

Но не чего не происходило я решил проверить что лежит в id, а там NaN, хотя по идее там должно быть число которое я ввёл в инпуте формы.

Answer 1

[Алексей Уколов]

Первый и самый важный шаг вы сделали — идите дальше. Смотрите что у вас в document.getElementById('id').value, потом что в document.getElementById('id'), если в value пусто.
Это называется "отладка" или "дебаг" и это примерно половина работы программиста.

выводит новую форму

Вангую, что в итоге у вас куча одинаковых форм и, соответственно, куча инпутов с id="id", что, естественно, недопустимо.

Comments

[holllop]

Да не уследил в другой форме тоже был id="id"