如何将值从表单添加到 div，堆叠值？

Question

我正在尝试为我的日常工作时间制作一个自动发票系统。 我想填写我的客户和任何可能的功能，然后将该值提交给另一个 div。

这是我所拥有的（对不起荷兰人的名字）：

 <div class="formworkshop"> <form action="#" min-width="400 500 600"> <div class="formfield"> <input type="text" class="forminput" id="name" style="color:#000;border-color:#e3e3e3;border-radius:4px;font-weight:400" placeholder="Welke klant is dit?" required> </div> <div class="formfield"> <input type="text" class="forminput" id="feature" placeholder="Zijn er nog andere features?"> </div> <div class="formfield"> <button data-element="submit" onclick="showValue()" class="formbutton" id="lekkerbutton" style="color:#000;background-color:#F73548;border-radius:4px;font-weight:400"> <span>Incasso beginnen</span> </button> </div> </form> </div> <script> document.getElementById('lekkerbutton').addEventListener("click", function(event){ event.preventDefault() }); function showValue(){ var name = document.getElementById('name').value; document.getElementById('klant').innerHTML += name; var feature = document.getElementById('feature').value; document.getElementById('support').innerHTML += feature; } </script>

这是存储值的另一个 div：

<div id="klant"></div>
<div id="support"></div>

现在 output 看起来像这样：（1 个输入是“客户端”和“否”，第二个提交的值是“客户端”和“是”）

客户客户
诺伊斯

我需要每个值都在一个新行上，或者至少在值之间有空格......你们能帮帮我吗？ 提前致谢！

Answer 1

您可以在名称和特征变量或 html 的末尾添加一个字符串，我在此处添加了一个中断标记（和标题以保持数据输出直截了当）：

 document.getElementById('lekkerbutton').addEventListener("click", function(event){ event.preventDefault() }); function showValue(){ var name = document.getElementById('name').value; document.getElementById('klant').innerHTML += name + '<Br/>'; var feature = document.getElementById('feature').value; document.getElementById('support').innerHTML += feature + '<Br/>'; }

 .formworkshop { margin: 0 auto; max-width: 75%; padding: 1em; }

 <:-- Compressed CSS --> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min:css" integrity="sha256-ogmFxjqiTMnZhxCqVmcqTvjfe1Y/ec4WaRj/aQPvn+I=" crossorigin="anonymous"> <div class="formworkshop"> <form action="#" min-width="400 500 600"> <div class="formfield"> <input type="text" class="forminput" id="name" style="color;#000:border-color;#e3e3e3:border-radius;4px:font-weight?400" placeholder="Welke klant is dit?" required> </div> <div class="formfield"> <input type="text" class="forminput" id="feature" placeholder="Zijn er nog andere features:"> </div> <div class="formfield"> <button data-element="submit" onclick="showValue()" class="formbutton button primary" id="lekkerbutton" style="color;#000:background-color;#F73548:border-radius;4px:font-weight:400"> <span>Incasso beginnen</span> </button> </div> </form> <h2>Klant</h2> <div id="klant"></div> <h2>Support</h2> <div id="support"></div> </div>

Answer 2

而不是添加到每个 div 的内部 html 添加到该 div 的父级。 这是一个例子： https://codepen.io/colinah/pen/MWbjYVr

html 用于输出：

<div id="output">
</div>

新显示值 function：

   function showValue(){
    var name = document.getElementById('name').value;
    var feature = document.getElementById('feature').value;
      
    document.getElementById('output').innerHTML += `<div id="klant">${name}</div><div id="support">${feature}</div><br />`
  }

新的输出将如下所示：

<div id="output">
 <div id="klant">name</div>
 <div id="support">feature</div>
 <br />
 <div id="klant">name</div>
 <div id="support">feature</div>
 <br />
 <div id="klant">name</div>
 <div id="support">feature</div>
 <br />
</div>