如何将我的范围滑块输入字段值绑定到我的html表中的正确输入字段？

Question

我正在使用Django formsets。

我的html表体内有一个范围滑块。当我移动滑块时，它会正确更新表格中的最后一个文本框（使用javascript来执行此操作）。我想要做的是第一个滑块更新第一个文本框，第二个滑块更新第二个文本框，依此类推。

这就是我的html tbody的样子

             <tbody class="product-instances">
             {% csrf_token %}
             {{ evawform.management_form }}
                  {% for form in evawform %}
                  {{ form.id }}
                    <tr>
                        <td>{{form.criterion}}</td>
                        <td><input type="range" min="1" max="100" value="1" class="slider" onchange="updateTextInput(this.value);"></td>
                        <td><input type="text" id="textinput{{forloop.counter}}" value="1"></td>
                        <td>{{form.updated_by}}</td>
                    </tr>
               {% endfor %} 
              </tbody>

这就是我的javascript函数的样子。

     function updateTextInput(val) {
         document.getElementById('textinput{{forloop.counter}}').value = val;
     }      

你能帮帮我吗？谢谢！

Answer 1

执行此操作的copypasta方法将是两个版本的updateTextInput(val)，每个版本都更新一个单独的id 'textinput{{forloop.counter}}'，但更好的方法是添加第二个参数。

 <td><input type="range" min="1" max="100" value="1" class="slider" onchange="updateTextInput(this.value,'textinput1{{forloop.counter}}');"></td>
 <td><input type="text" id="textinput1{{forloop.counter}}" value="1"></td>
 <td><input type="range" min="1" max="100" value="1" class="slider" onchange="updateTextInput(this.value,'textinput2{{forloop.counter}}');"></td>
 <td><input type="text" id="textinput2{{forloop.counter}}" value="1"></td>

对您的帮助函数进行以下更新：

function updateTextInput(val,id) {
     document.getElementById(id).value = val;
 }