Суммирование всех введенных чисел в текстовом поле и отображение их в отключенном поле.

Question

Мне нужно создать счетчик ручного ввода, используя редактор сценариев приложения.

У меня уже есть дизайн моего сайта с одним полем ввода, кнопкой сброса и отключенным полем.

То, что я хочу, - это когда я ввожу число в текстовое поле и нажимаю «Ввод», оно будет отображаться в отключенном поле. Если я повторю процесс, новый номер в текстовом поле будет суммироваться со значением внутри отключенного поля.

Я также хотел бы иметь кнопку сброса для отключенного поля.

Наконец, запись журнала значений внутри отключенного поля.

Возможно ли это сделать, просто используя 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 = "";
});

Я использовал этот код, и что происходит, когда я ввожу число и нажимаю ввод, он отображается в поле отключенного (это хорошо) однако значение в текстовом поле не очищается. Во-вторых, если я введу новое число, оно не будет суммироваться в поле «отключено». Наконец, журнал истории записывает все значения, введенные в текстовом поле, а не в предыдущем значении отключенного поля.

Как я могу это исправить?

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>