多行应用中实现点击Update按钮同步输入框数据到Result列div

原代码核心问题 #

• HTML中重复使用id="input"和id="output"，ID在页面中必须唯一，导致JS只能获取到第一个匹配元素
• 错误给input元素绑定submit事件，input本身无该事件，应在按钮点击时触发同步逻辑
• 未建立点击按钮与对应行输入框、输出容器的关联

修改后的完整代码 #

HTML部分（修复重复ID问题）

<div id="table">
  <div id="title" class="row">
    <div>
      <div class="header">Round #</div>
    </div>
    <div>
      <div class="header">Date</div>
    </div>
    <div>
      <div class="header">Versus</div>
    </div>
    <div>
      <div class="header">Ground</div>
    </div>
    <div>
      <div class="header">Result</div>
    </div>
    <div>
      <div class="header">Edit/Update</div>
    </div>
  </div>
  <div id="line1" class="row">
    <div>
      <div class="header">1.</div>
    </div>
    <div>
      <div class="header">17/08/2024</div>
    </div>
    <div>
      <div class="header">Ipswich</div>
    </div>
    <div>
      <div class="header">Portman Road</div>
    </div>
    <div>
      <div class="output header"></div>
    </div>
    <div class="form-group">
      <input class="data" placeholder="Enter/Edit Result" name="res" />
      <button class="btn btn-success update-btn" type="button">
        Update
      </button>
    </div>
  </div>
  <div id="line2" class="row">
    <div>
      <div class="header">2.</div>
    </div>
    <div>
      <div class="header">25/08/2024</div>
    </div>
    <div>
      <div class="header">Brentford</div>
    </div>
    <div>
      <div class="header">Anfield</div>
    </div>
    <div>
      <div class="output header"></div>
    </div>
    <div class="form-group">
      <input class="data" placeholder="Enter/Edit Result" name="res" />
      <button class="btn btn-success update-btn" type="button">
        Update
      </button>
    </div>
  </div>
</div>

JavaScript部分（实现按钮与对应输入输出的关联）

// 利用事件委托，在父容器上统一处理按钮点击
document.getElementById('table').addEventListener('click', (e) => {
  // 过滤非Update按钮的点击
  if (!e.target.classList.contains('update-btn')) return;

  // 定位当前按钮所在的行
  const currentRow = e.target.closest('.row');
  // 从当前行获取对应的输入框和输出容器
  const inputField = currentRow.querySelector('.data');
  const outputDiv = currentRow.querySelector('.output');

  const inputValue = inputField.value.trim();
  
  // 非空判断后更新数据
  if (inputValue) {
    outputDiv.textContent = inputValue;
    inputField.value = '';
  }
});

关键逻辑说明 #

1. 事件委托：仅在父容器绑定一次点击事件，通过类名判断目标按钮，避免重复绑定
2. DOM关系定位：用closest('.row')锁定当前行，再通过querySelector获取该行内的输入输出元素，确保每行数据独立处理
3. 安全数据更新：用textContent替代innerHTML更新内容，避免XSS风险，同时做非空校验

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