Question

我希望将输入的每个不同项目输出到一个新框中。

<!DOCTYPE html>

<html>
<body>

获取输入的表格

<form id="form1">
    <input name="item" type="text" size="20">
</form>

应该复制以容纳新输入的框。

<div class="box">
    <p class="output"></p>
<div>


<button onclick="outputItem()">Add</button>

javascript：

<script>
    function outputItem() {
        var x = document.getElementById("form1"); 
        item = x.elements.namedItem("item").value;
        document.getElementById("output").innerHTML=item;
</script>

</body>
</html>

Answer 1

我不确定这是否接近您想要的水平，但是请尝试一下：

function outputItem() {
  var els = document.querySelectorAll("#form1 input"); 
  var box = document.querySelector('.box');
  box.innerHTML = '';
  els.forEach(
    function(el) {
      var newEl = document.createElement('div');
      newEl.innerHTML = el.value;
      box.appendChild(newEl);
    }
  );
}

<form id="form1">
    <input name="item" type="text" size="20" value="item"><br/>
    <input name="eggs" type="text" size="20" value="eggs"><br/>
    <input name="milk" type="text" size="20" value="milk"><br/>
    <input name="grains" type="text" size="20" value="grains"><br/>
    <input name="legumes" type="text" size="20" value="legumes"><br/>
</form>
<button onclick="outputItem()">Add</button>
<hr/>
<div class="box"></div>

这将为每个输入创建一个新的<div>并将.value从<input>复制到新的<div>中。然后将<div>添加到输出区域。

如何使每个新输出出现在新框中？

1 个答案: