Как добавить два поля ввода одновременно и пропустить строку после каждой записи

Question

Я создал форму для вычисления площади по координатам. Таким образом, пользователь должен вводить пары координат (y, x), и каждый раз, когда пользователь нажимает кнопку добавления, новые поля формы должны отображаться с двумя парами координат. Я придумал этот код в JS

function add(type) {

	//================================== generating content for the y-coordinate =============================
	//create an input element dynamically
	var element = document.createElement("input");

	//assign different attributes to the element.
	element.setAttribute("type", "text");
	element.setAttribute("value", "");
	element.setAttribute("name", "field");
	element.setAttribute("class", "smallbox");

	var foo = document.getElementById("fooBar");

	//Append the element in page (in span).
	foo.appendChild(element);
	//================================ end of content for the y-coordinate ========================================
	

	//================================== generating content for the x-coordinate =====================================
	//create an input element dynamically 
	var el = document.createElement("input");

	//assign different attributes to the element
	el.setAttribute("type", "text");
	el.setAttribute("value", "");
	el.setAttribute("name", "field");
	el.setAttribute("class", "smallbox");

	var foo_x = document.getElementById("fooBar_x");

	//Append the element in page (in span).
	foo_x.appendChild(el);

	//=========================================== end of content for the x-coordinate ==================================

и код HTML:

<form>
<h4>Land Area</h4>
<br>
<select name="element" value="text" class="hidden">
</select>

<div style="text-align:center;">
<span id="fooBar">&nbsp;</span><span id="fooBar_x">&nbsp;</span>


<br><br>
<input type="button" value="Add" class="btn" onclick="add(document.forms[0].element.value)">
</div>
<br><br>
<p style="text-align:center;">
<input type="button" value="Calculate" class="btn" onclick="display()">
</p>
</form>

Проблема в том, что каждый раз, когда пользователь нажимает Добавить , новый набор добавляется после предыдущего элемента, в данном случае вскоре после первого тега диапазона. но я хочу, чтобы код добавил оба поля внизу двух предыдущих записей.

Пожалуйста, помогите

Answer 1

Поместите два новых поля, которые вы добавляете, в родительский контейнер div и просто добавьте div вместо двух span s.

Кроме того, если вы никуда не отправляете данные формы , вам не нужен элемент form, и вам не нужно устанавливать name для полей формы (хотя каждое из них должно иметь другое имя, когда вы его используете). Кроме того, если вы собираетесь использовать h4, он должен быть вложен в элемент h3. Заголовки не используются для того, как они заставляют текст выглядеть - они semanti c (как и все HTML).

И вы можете просто настроить новый inputs, используя свойства DOM и методы вместо generi c .setAttribute().

См. дополнительные встроенные комментарии.

// Do all your event binding in JavaScript, not HTML
document.querySelector("input.btn.add").addEventListener("click", add);
document.querySelector("input.btn.calc").addEventListener("click", display);

// Get DOM references you'll use over and over just once:
let select = document.getElementById("primarySelect");
let main = document.querySelector("div.main");

function add(){

  // Create a wrapper for the two new input fields
  var wrapper = document.createElement("div");

  // Create the two new input fields and configure them:
  var elementY = document.createElement("input");
  elementY.type = "text";
  elementY.placeholder = "Enter Y coordinate";
  elementY.classList.add("smallbox");

  var elementX = document.createElement("input");
  elementX.type ="text";
  elementX.placeholder = "Enter X coordinate";  
  elementX.classList.add("smallbox");

  // Append the elements into the wrapper
  wrapper.appendChild(elementY);
  wrapper.appendChild(elementX);

  // Append the wrapper to the document
  main.appendChild(wrapper);
  
}

function display(){

}

.center { text-align:center; }
.hidden { display:none; }
.btn { margin:1em; }

<h1>Land Area</h1>
<select id="primarySelect" value="text" class="hidden"></select>
<div class="main center"></div>

<p class="center">
  <input type="button" value="Add" class="btn add"><br>
  <input type="button" value="Calculate" class="btn calc">
</p>