Как присвоить объекту input.value по id?

Question

[Andy Koshman]

Всем добрый день, подскажите пожалуйста, как присвоить значение input в определенный объект по совпадающему идентификатору? Например кликается кнопка находящаяся в разметке блока у которого id="2" и данные должны присвоится объекту persons у которого свойство id === 2. Сейчас заполняются все объекты вне зависимости от идентификатора, не могу понять как правильно доделать.

https://jsfiddle.net/6c2bu3f9/15/

<form>
  <div class="parent__block">
    <div class="child__block" data-id="1">
      <div class="">name: </div><input type="text" class="name">
      <div class="">surname: </div><input type="text" class="surname">
      <button type="submit">click</button>
    </div>
  </div>
  <div class="parent__block">
    <div class="child__block" data-id="2">
      <div class="">name: </div><input type="text" class="name">
      <div class="">surname: </div><input type="text" class="surname">
      <button type="submit">click</button>
    </div>
  </div>
</form>

const form = document.querySelector('form')
const button = document.querySelectorAll('button')

const persons = [{
    id: 1,
    check: 1,
  },
  {
    id: 2,
    check: 0,
  }
]

button.forEach((btn) => {
  btn.addEventListener("click", function(e) {
    e.preventDefault()
    const parent = e.target.closest(".parent__block");
    const name = parent.querySelector('.name');
    const surname = parent.querySelector('.surname');
    const child = parent.querySelector('.child__block')
    const dataID = +child.dataset.id
    console.log(dataID)

    const data = {
      id: dataID,
      name: name.value,
      surname: surname.value,
    }

    for (let key in persons) {
      if (dataID === data.id) {
        persons[key].name = name.value
        persons[key].surname = surname.value
      }
    }
    console.log(persons)
  })
})

Comments

[Александр Каторгин]

Вот это условие посмотрите, не смотрел детально, но судя по всему оно всегда выполняется

if (dataID === data.id) {

Answer 1

[Александр]

У Вас проверка реализована некорректно: получили ID и его с собой сравнили.

<div class="parent__block">
  <form class="child__block" data-id="1">
    <div class="">name: </div><input type="text" class="name" name="name">
    <div class="">surname: </div><input type="text" class="surname" name="surname">
    <button type="submit">click</button>
  </form>
</div>
<div class="parent__block">
  <form class="child__block" data-id="2">
    <div class="">name: </div><input type="text" class="name" name="name">
    <div class="">surname: </div><input type="text" class="surname" name="surname">
    <button type="submit">click</button>
  </form>
</div>

const persons = [
  { id: 1, check: 1 },
  { id: 2, check: 0 }
];

const onFormSubmit = (form) => {
  form.addEventListener('submit', (event) => {
    event.preventDefault();

    const id = parseInt(form.dataset.id);
    if (!Number.isNaN(id)) {
      const formData = new FormData(form);
      const person = persons.find((person => person.id === id));

      person.name = formData.get('name');
      person.surname = formData.get('surname');
      
      console.log(persons);
    }
  });
};

document
  .querySelectorAll('form[data-id]')
  .forEach((form) => onFormSubmit(form));

Comments

[Andy Koshman]

Спасибо.