如何在Django模板循环中使用JavaScript获取多个输入值？

问题根源 #

HTML规范明确要求id属性值必须是唯一的，你通过Django循环渲染时，生成了多个id为odds和amount的输入框，而document.getElementById()只会返回页面中第一个匹配该id的元素，所以每次打印都只能拿到第一个输入框的odds值。

另外还有个隐藏问题：你把CalculateNewBalance函数定义在循环内部，这会导致页面生成多份完全相同的函数定义，不仅冗余，还可能引发不必要的冲突。

解决方法 #

这里提供两种实用的修改方案，任选其一即可：

方案一：通过父元素关联对应输入框（推荐）

利用输入框所在的表单作为上下文，用class标识同类元素，避免依赖唯一id：

{% for p in prediction.prediction_data.all %}
  <form action="#" method="POST" class="prediction-form">
     <!-- 用class标记odds输入框，id可选但建议唯一 -->
     <input type="text" value="{{ p.odds }}" class="odds-input" id="odds-{{ p.id }}">
     <!-- 触发事件时传递当前输入框对象 -->
     <input type="number" value="" name="amount" class="amount-input" onkeyup="CalculateNewBalance(this)">
  </form>
{% endfor %}

<!-- 把函数移到循环外，只定义一次 -->
<script>
  function CalculateNewBalance(amountInput) {
      // 通过当前输入框找到所属的表单
      const parentForm = amountInput.closest('.prediction-form');
      // 在表单内找到对应的odds输入框
      const odds = parentForm.querySelector('.odds-input').value;
      console.log(odds);
  }
</script>

方案二：给每个元素生成唯一id

利用Django循环的计数器或对象id生成唯一id，在事件中传递标识来定位元素：

{% for p in prediction.prediction_data.all %}
  <form action="#" method="POST">
     <!-- 用p的id生成唯一id -->
     <input type="text" value="{{ p.odds }}" id="odds-{{ p.id }}">
     <!-- 触发事件时传递当前项的id -->
     <input type="number" value="" name="amount" id="amount-{{ p.id }}" onkeyup="CalculateNewBalance('{{ p.id }}')">
  </form>
{% endfor %}

<script>
  function CalculateNewBalance(itemId) {
      // 通过拼接的唯一id获取对应输入框的值
      const odds = document.getElementById(`odds-${itemId}`).value;
      console.log(odds);
  }
</script>

关键修改点总结 #

• 确保页面中每个元素的id唯一，或者放弃用id定位，改用class+父元素上下文
• 将函数定义移到循环外部，避免重复定义
• 触发事件时传递足够的上下文信息，让函数能精准定位到对应的元素

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