使用 JavaScript 在多个 HTML 输入字段值之间进行动态线性插值

Question

我正在尝试创建一个动态生成的输入字段数组，其中只有第一个和最后一个是可编辑的。当任一边界字段被修改时，其余的应通过在两个边界值之间进行线性插值来更新它们的值。下面的例子。

我编写了一个 (Django/Bootstrap) HTML 模板，它自己生成输入字段，只留下可编辑的边框字段并分配“-first”和“-last”id 扩展名。

我还编写了一个基本的 JavaScript，它接受两个输入值在和输出数组大小之间进行插值。

这就是输入字段的实例化方式。我开始编写一个 JS 函数“change_values()”，它会在 onchange 事件中被激活，但没有成功。

<div class="custom-control custom-linspace-field">
  <div class="row" id="linspace-field">
    {% for field in fields %}
    <div class="col p-1">
      {% if forloop.first %}
      <input type="text" class="form-control" onchange="change_values()" id="linspace-field-first" value="{{ field | floatformat:3 }}" placeholder="min">
      {% elif forloop.last %}
      <input type="text" class="form-control" onchange="change_values()" id="linspace-field-last" value="{{ field | floatformat:3 }}" placeholder="max">
      {% else %}
      <input type="text" class="form-control" onchange="change_values()" id="linspace-field" value="{{ field | floatformat:3 }}" readonly>
      {% endif %}
    </div>
    {% endfor %}
  </div>
</div>

这是我的线性插值 JS 脚本：

function lerp(value1, value2, amount) {
    step = (value2 - value1) / amount;
    output = [value1];
    var i;
    for (i = 1; i < amount; i++) {
      output.push(output[output.length - 1] + step);
    }
    output.push(value2);
    output_round = [];
    output.forEach(function(item) {
      output_round.push(item.toFixed(2));
    });
    return output_round;
  }

我希望找到一种方法以正确的顺序访问输入字段值，并在任一边框输入字段上触发 onchange 事件时更新它们。

基本上我的问题是：在 onchange 事件上调用的 change_values() 函数的代码应该是什么样的？

Answer 1

感谢@HelgeFox 指出我的 HTML 中不应该有相同的 id 标签。这让我意识到我可以使用它们在创建输入字段时动态分配唯一 ID，然后使用它们来分配插值。

{% for field in some_list_with_enumerated_initial_values %}
<div class="col p-1">
  {% if forloop.first %}
  <input type="number" step="0.05" class="form-control" onchange="change_fields()" id="linspace-field-{{ field.0 }}" value="{{ field.1 }}" placeholder="min">
  {% elif forloop.last %}
  <input type="number" step="0.05" class="form-control" onchange="change_fields()" id="linspace-field-{{ field.0 }}" value="{{ field.1 }}" placeholder="max">
  {% else %}
  <input type="text" class="form-control" onchange="change_fields()" id="linspace-field-{{ field.0 }}" value="{{ field.1 | floatformat:3 }}" readonly>
  {% endif %}
</div>
{% endfor %}

这是我使用的 JS 函数。

function lerp(value1, value2, amount) {
    // Calculate what the interpolation step will be.
    step = (value2 - value1) / amount;
    // Create an array where all the interpolated values will be added. Add the first value.
    output = [value1];
    var i;
    // Start with i = 1 so that the last element would not be added.
    for (i = 1; i < amount; i++) {
      output.push(output[output.length - 1] + step);
    }
    // The last element is added here, because this way it is certain that the last value will match value2 in arguments.
    output.push(value2);
    // Round all elements before returning
    output_round = [];
    output.forEach(function(item) {
      output_round.push(item.toFixed(2));
    });
    return output_round;
  }

  function change_fields() {
    // Create an array with all the "linspace-field" elements.
    var fields = $('*[id^="linspace-field"]');
    // Create another array with the new set of values. They are stored as strings and need to be parsed.
    var lerp_values = lerp(parseFloat(fields[0].value), parseFloat(fields[fields.length - 1].value), fields.length - 1)
    var i;
    for (i = 0; i < fields.length; i++) {
      // Replace each of the values in "linspace-field" elements.
      fields[i].value = lerp_values[i];
    }
  }