Как создать счетчик суммирования вручную с записями журналов, используя Javascript и html? - PullRequest
Новая
       0

Как создать счетчик суммирования вручную с записями журналов, используя Javascript и html?

0 голосов
/ 17 февраля 2020

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

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

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

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

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

Мне действительно нужно закончить sh до конца этого месяца.

Возможно ли это сделать, просто используя html, Javascript и скрипт приложения?

Вот мой код: 

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 = "";
});

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

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

Пожалуйста, кто-нибудь, помогите мне 10

1 Ответ

1 голос
/ 17 февраля 2020

Вам просто нужно преобразовать тип данных в число, используя parseFloat или число: 

box2.value = Number(box2.value) + Number(e.target.value);

Пример в реальном времени: 

<!DOCTYPE html>
<html lang="en">
  <head>
<meta charset="UTF-8" />
<title></title>
  </head>
  <body>
<div>
  <p>
    <input id="box1" type="number" />
    <input id="box2" type="number" disabled />
    <button id="reset">Reset</button>
    <div id="history">History</div>
  </p>
</div>
<script charset="utf-8">
  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 = Number(box2.value)+ Number(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 = '';
  });
</script>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...