需要在表单中重复(循环)的 javascript 表单字段

Question

下面是一些使用时间选择器的 HTML 表单代码。当我单击第一行时，时间选择器按预期执行。但是，当我尝试向第二行或后续行添加时间时，它不起作用。 onClick 函数显示日历，就像在第一行中一样，但值不会返回到输入单元格。

下面的代码是在循环命令中生成的，每一行都被分配了一个索引/唯一值。但它仍然无法正确执行。 HTML 表单页面本身是用 ColdFusion 编写的。

<cfoutput> 
   <cfloop index="z" from="1" to="3">

    <div class="table right">
      <input type="text" id="starttime#z#" placeholder="Time">
    </div>

    <div class="table right">  
      <input type="text" id="endtime#z#" class="icon" placeholder="Time">
      <a id="link#z#"></a>
    </div>

    <script>
    var endtime#z# = document.getElementById('endtime#z#');
    var timepicker = new TimePicker(['starttime#z#', 'link#z#'], {
      lang: 'en',
      theme: 'blue-grey'
    });
    timepicker.on('change', function (evt#z#) {
      var value = (evt#z#.hour || '00') + ':' + (evt#z#.minute || '00');

      if (evt#z#.element.id === 'link#z#') {
        endtime.value = value;
      } else {
        evt#z#.element.value = value;
      }
    });

    hljs.configure({ tabReplace: '  ' });
    hljs.initHighlightingOnLoad();
    </script>

</cfloop>
</cfoutput>

Answer 1

你说这段代码是在循环内执行的。我们假设循环使代码运行 3 次。这意味着类似这样的事情:

<input type="text" id="endtime2" placeholder="Time">

将在页面上出现3次。 JavaScript 会遇到这个问题:

var endtime2 = document.getElementById('endtime2');

因为有 3 个 id = endtime2 的元素。

你可以这样处理:

<cfoutput>
<cfloop from = 1 to = 3 index = "idx">
<input type="text" id="endtime#idx#" placeholder="Time">
etc
var endtime#idx# = document.getElementById('endtime#idx#');
etc