当用户单击按钮时，如何创建空格线（如 br）？答案

【问题标题】：How can I create a space line (like a br) when user clicks on button?当用户单击按钮时，如何创建空格线（如 br）？
【发布时间】：2022-08-12 13:40:27
【问题描述】：

我需要一个javascript函数或任何东西，所以当用户在输入类型文本中输入名称时，它会将文本放在#final下方的段落中，以此类推，只要用户单击按钮，就会不断添加空格。

function ir() {
  let nombre = document.getElementById(\"nombre\").value;
  let monto = document.getElementById(\"monto\").value;
  let total = document.getElementById(\"total\");
  let final = document.getElementById(\"final\");
  let aporte = document.getElementById(\"aporte\");

  for (i = 0; i < monto; i++) {
    total.innerText = ` ${nombre} : ${monto}`;
  };

  if (total > 0) {
    monto + monto
  }

  final.innerHTML = `${monto}`;
  aporte.innerHTML = `${monto}`;
};

<html>


<p>Nombre</p>
<input type=\"text\" id=\"nombre\">
<br>
<p>Monto</p>
<input type=\"number\" id=\"monto\">
<br>
<button onclick=\"ir()\">Enviar</button>
<br>
<p>Total: <span id=\"final\"></span> </p>
<div id=\"total\">
</div>
<p>A cada uno le toca aportar: <span id=\"aporte\"></span></p>
</div>

</html>

我该怎么做？

文本行是什么意思？你的问题有点不清楚
对不起，我编辑了它，所以它可以更清楚一点

标签： javascript html

【解决方案1】：

试试这个功能：

function ir() {
  // Set everything to const because they don't change and it's good practise
  const nombre = document.getElementById("nombre").value;

  // Monto changes below, so we can use LET!!
  let monto = document.getElementById("monto").value;

  const total = document.getElementById("total");
  const final = document.getElementById("final");
  const aporte = document.getElementById("aporte");

  // Create new element under total
  const lineBreak = document.createElement("br");
  let newTotal = document.createTextNode(` ${nombre} : ${monto} `);
  total.appendChild(lineBreak);
  total.appendChild(newTotal);


  // Set monto to monto + the value already there
  // Use Number to make it number (without Number it's string, 1+2 = 12 and not 3)
  monto = Number(monto) + Number(final.innerHTML);

  final.innerHTML = `${monto}`;
  aporte.innerHTML = `${monto}`;
};

它的作用是在 total 下创建一个新元素，并在用户每次单击按钮时更新它。

总数也更新了。

【讨论】：

更正它将孩子附加到总数而不是在它下面
@innocent，对不起，我的意思是字面意思以下它，当阅读代码时，它出现在它的下方......此外，它是不言自明的，它是一个孩子，所以我们可以假设它在它的父母之内

【解决方案2】：

一种可能的方法是检查nombre 和monto 的值。如果它们是空的（或者只是空格），我们可以创建并附加一个 <br> 元素。

if (monto.trim() == "" || nombre.trim() == "") {
  let lineBreak = document.createElement("BR");
  total.appendChild(lineBreak);

我不确定您想将其附加到哪个元素，因此将其相应地更改为element.appendChild(createdElementName)。

希望我能提供帮助！

【讨论】：