javascript - 在保持起点的情况下添加n次新参数

Question

我基本上正在构建一个距离计算器。用户输入原点，然后输入 x 和 y 的值，这些值将添加到原点的 xy 上。但在他/她输入这些内容后，可能会有理由向 x 和 y 添加更多内容。为此，在原始方程答案字段下，我将在完成原始函数后添加另一个输入字段。

如何做到这样，无论用户对 x 和 y 输入校正多少次，都会在上次计算的输出字段下创建新的输入字段，并将新输入添加到最后的结果中，而不是原始的结果中然后再次运行整个计算？我知道一种方法是创建重复函数，将新输入定义为新变量 - 首先是 x，然后是 x1，然后是 x2 等等，但这不会被定义为良好实践，因为它会经常重复。如何将新输入字段的 id 定义为 x+n？

我必须使用 vanilla javascript，该程序必须在 Windows Mobile 6.1 设备上离线运行。另外，我对编码还很陌生，所以如果您能给我指出正确的方向(我目前无法更好地定义问题)，我将非常感激。

Answer 1

看起来您只需要收集表单输入而不进行真正的提交。我做了一个非常简单的模拟。在此处或其他地方结合您的逻辑来处理全局输入数组。

另请注意，堆栈溢出的在线编辑器在提交时有一些奇怪的行为，但这在本地应该没问题。

var inputs = [];

function add() {
  var xElem = document.getElementById("x");
  var yElem = document.getElementById("y");

  var xValue = xElem.value;
  var yValue = yElem.value;

  inputs.push({
    "x": xValue,
    "y": yValue
  });

  xElem.value = "";
  yElem.value = "";

  console.log(inputs);
  return false; // Prevents form from "submitting"

}

<form id="inputform" onsubmit="add()">
  <input id="x" placeholder="x" /><br>
  <input id="y" placeholder="y" />
  <input type="submit" />
</form>