javascript - 总结文本框中所有输入的数字并将其显示在禁用的框中

Question

我需要使用应用脚本编辑器创建手动输入计数器。

我的网站设计已经有了一个输入文本框、重置按钮和一个禁用框。

我想要的是当我在文本框中输入一个数字并按“Enter”时，它将显示在禁用的框中。如果我重复该过程，文本框中的新数字将总计为禁用框中的值。

我还想为禁用的框设置一个重置按钮。

最后，在禁用框中记录值日志。

这甚至可以通过使用 HTML、JavaScript 和 AppScript 来实现吗？

这是我的代码：

let box1 = document.getElementById("box1");
let box2 = document.getElementById("box2");
let resetBtn = document.getElementById("reset");
let historyContainer = document.getElementById("history");
let history = [];

//listen key enter press on the input
box1.addEventListener("keyup", e => {
  if (e.key === "Enter" && e.target.value !== "") {
  box2.value = e.target.value;
  history.unshift(e.target.value);
  historyContainer.innerHTML += `<p>${e.target.value}</p>`;
  }
});
//reset the second box and
resetBtn.addEventListener("click", () => {
  box2.value = "";
});

我已经使用了这段代码，发生的事情是，当我输入一个数字并按 Enter 时，它会显示在禁用的框中（这是一件好事）但是，文本框中的值并不清楚。第二件事是，如果我输入一个新数字，它不会在禁用框中总结。最后，历史日志记录在文本框中输入的所有值，而不是在禁用框的先前值中。

我怎样才能解决这个问题？

标签： javascripthtmlgoogle-apps-script

Answer 1

我根据您的需要为您创建了一个演示。请让我知道它是否满足您的需求。

为了解决您面临的问题，我正在存储新值而不是以前的值。

let box1 = document.getElementById("box1");
let box2 = document.getElementById("box2");
let resetBtn = document.getElementById("reset");
let historyContainer = document.getElementById("history");
let history = [];

//listen key enter press on the input
box1.addEventListener("keyup", e => {
  if (e.key === "Enter" && e.target.value !== "") {
  const summedValue = (box2.value && box2.value.trim() === "")  ? Number(box2.value) : Number(box2.value) + Number(e.target.value)
  box2.value = summedValue;
  historyContainer.innerHTML += `<p>${box2.value}</p>`;
  box1.value = "";
  }
});
//reset the second box and
resetBtn.addEventListener("click", () => {
  box2.value = "";
  historyContainer.innerHTML = ""
});

<input type="number" id="box1" />
<input type="number" id="box2" disabled />
<div id="history">
</div>

<button type="button" id="reset">
Reset
</button>