当用户单击按钮时，如何创建 space 行（如 br）？

Question

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

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>

我该怎么做？

Answer 1

欢迎来到 Whosebug，

试试这个功能：

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}`;
};

它所做的是在总计下方创建一个新元素，并在每次用户单击该按钮时更新它。

总数也更新了...

这是你想要的吗？希望对您有所帮助:)

Answer 2

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

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

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

希望我能帮上忙！

当用户单击按钮时，如何创建 space 行（如 br）？

How can I create a space line (like a br) when user clicks on button?

javascript

html