如何在EJS中动态修改多个循环渲染元素的值？

核心问题 #

1. 重复ID违反HTML规范：循环生成的所有<h2>都使用了同一个id="value"，但HTML中id属性必须全局唯一。document.getElementById('value')只会返回页面中第一个匹配该ID的元素，因此所有按钮点击都只会修改第一个<h2>的值。
2. 点击事件未关联对应元素：btnHandler函数没有接收任何能标识当前按钮对应元素的参数，无法区分要修改的目标<h2>。

修复方案1：使用唯一ID绑定元素 #

给每个循环生成的<h2>和按钮设置唯一标识，点击时将对应ID传递给处理函数：

<% for(let i=0; i<10; i++){ %>
  <h2 id="value-<%= i %>">0</h2>  
  <button onclick="btnHandler(<%= i %>)">click to change</button>
<% } %>

<script> 
  function btnHandler(index){
    const val = document.getElementById(`value-${index}`);
    // 从元素本身读取当前值，避免全局变量共享导致计数混乱
    let currentVal = parseInt(val.innerHTML);
    val.innerHTML = `${currentVal + 1}`;
  }
</script>

修复方案2：利用DOM元素关系（无需额外ID） #

通过按钮的DOM位置关系找到对应的<h2>（比如按钮的前一个兄弟元素），实现更简洁的关联：

<% for(let i=0; i<10; i++){ %>
  <h2>0</h2>  
  <button onclick="btnHandler(this)">click to change</button>
<% } %>

<script> 
  function btnHandler(btn){
    // 获取当前按钮的前一个兄弟元素（即对应的h2）
    const val = btn.previousElementSibling;
    let currentVal = parseInt(val.innerHTML);
    val.innerHTML = `${currentVal + 1}`;
  }
</script>

修复方案3：事件委托（高性能方案） #

如果循环生成的元素数量较多，推荐使用事件委托——仅给父元素绑定一次事件，避免重复绑定带来的性能损耗：

<div id="container">
  <% for(let i=0; i<10; i++){ %>
    <h2>0</h2>  
    <button>click to change</button>
  <% } %>
</div>

<script> 
  const container = document.getElementById('container');
  container.addEventListener('click', function(e){
    // 判断点击的目标是按钮
    if(e.target.tagName === 'BUTTON'){
      const val = e.target.previousElementSibling;
      let currentVal = parseInt(val.innerHTML);
      val.innerHTML = `${currentVal + 1}`;
    }
  });
</script>

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