Добавление n раз новых параметров при сохранении начальной точки

Question

Я строю в основном калькулятор расстояний. Пользователь вводит исходную точку, а затем значения x и y, которые будут добавлены к исходной точке xy. Но после того, как он / она введет их, может появиться причина добавить больше к x и y. Для этого в поле ответа исходных уравнений я добавлю другое поле ввода после завершения исходной функции.

Как сделать так, чтобы независимо от того, сколько раз пользователь вводит поправки к x и y, новый вводполя создаются под полем вывода последнего вычисления, и новые входы добавляются к последнему результату, а не к исходному, а затем снова выполняется весь расчет? Я знаю, что одним из способов было бы создание дублирующих функций, которые определяют новые входные данные как новые переменные - сначала x, затем x1, затем x2 и т. Д., Но это не будет определяться как хорошая практика, вероятно, поскольку она будет повторяться много раз. Как определить новые идентификаторы поля ввода как 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>