如何通过keyup事件修改数组中对应存储对象的属性值

用户输入若干值后，点击提交按钮即可将对应值插入对象数组中。

当前已有的对象数组结构如下：

0: {name: "a", club: "b"}
1: {name: "c", club: "d"}

需要实现功能：在生成的输入框中输入内容触发keyup事件时，将数组中对应对象的name/club属性值修改为输入的内容。

调整后完整代码 #

JavaScript部分 #

var player = [];
function insertData() {
  var name = document.querySelector('input[name="name"]').value;
  var club = document.querySelector('input[name="club"]').value;
  player.push({
    name,
    club
  });
  onSetDisplay();
}
function onSetDisplay() {
  document.querySelector('.display').innerHTML = "";
  for (i = 0; i < player.length; i++) {
    var wrapper = onCreateElement('div', null, i);
    // 创建input时传入对应数组索引和字段名
    var input1 = onCreateElement('input', player[i].name, {index: i, field: 'name'});
    var input2 = onCreateElement('input', player[i].club, {index: i, field: 'club'});
    wrapper.appendChild(input1);
    wrapper.appendChild(input2);
    var deleteBtn = onCreateElement('button', '', "Delete", function () {
      player.splice(this.parentNode.getAttribute('data-index'), 1);
      // 删除后重新渲染，避免索引与数据对应错乱
      onSetDisplay();
    });
    wrapper.appendChild(deleteBtn);
    document.querySelector('.display').appendChild(wrapper);
  }
}
function onCreateElement(element, value, extra, ev) {
  var e = document.createElement(element);
  if (element == 'input') {
    e.value = value;
    e.type = 'text';
    // 将索引和字段名存在元素自定义属性中
    e.dataset.index = extra.index;
    e.dataset.field = extra.field;
    // 绑定keyup触发修改方法
    e.addEventListener('keyup', editData);
  } else {
    e.setAttribute('data-index', extra)
    e.innerHTML = extra;
  }
  if (typeof ev == 'function') {
    e.addEventListener('click', ev);
  }
  return e;
}
// 新增数据修改方法
function editData(e) {
  const target = e.target;
  const index = target.dataset.index;
  const field = target.dataset.field;
  // 同步修改数组对应值
  player[index][field] = target.value;
}

HTML部分 #

<input type="text" name="name">
<input type="text" name="club">
<br><br>
<input type="button" value="Submit" onclick="insertData();">
<br><br>
<div class="display"></div>

核心调整说明 #

• 原代码中所有动态生成的input没有绑定对应数据的索引和字段标识，无法定位需要修改的数组属性，本次新增dataset属性存储对应关联信息
• 新增editData方法，触发时从事件目标元素读取关联的索引和字段，直接同步更新player数组的对应值
• 修正删除按钮逻辑，删除数据后重新渲染列表，避免后续操作出现索引和数据不匹配的问题
• 移除了原代码中所有input重复设置相同id的不符合规范写法

内容的提问来源于stack exchange，提问作者jacksmug