如何同时追加两个输入字段并在每次输入后跳行

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>

问题是每次用户单击 Add 时，新集合都会添加到前一个元素之后，在本例中是在第一个 span 标记之后不久，但我希望代码能够将这两个字段附加到前两个条目的底部。

请帮忙

Answer 1

将您追加的两个新字段放入 div parent 容器中，只需追加 div 而不是两个 span。

此外，如果您不在任何地方提交表单数据，则不需要 form 元素，也不需要为表单字段设置 name（每个字段都应该但是当你使用它时有一个不同的名字）。此外，如果您要使用 h4，它应该嵌套在 h3 元素中。标题不用于它们如何使文本看起来 - 它们是语义的（就像 HTML 的所有内容一样）。

而且，您可以使用 DOM 属性和方法而不是通用的 .setAttribute().

来设置新的 inputs

查看内联的其他评论。

// 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>

如何同时追加两个输入字段并在每次输入后跳行

How to Append Two Input fields at the same time and skip line after every entry

html

javascript

jquery

dynamic

appendchild