Bondich228
@Bondich228
Мамкин программист))

Как сделать умножение input на div без обновления страницы?

Нужно, чтобы DIV .result умножался на input #multiply в зависимости, что я введу в сам input. К сожалению, скрипт работает только после обновления страницы.
<form>
<input id="multiply" type="text" name="number" value="10">

<div class="result">3</div>
<div class="result">4</div>
<div class="result">6</div>
<div class="result">7</div>
</form>

const multiplyInput = document.querySelector('#multiply');
const resultElements = document.querySelectorAll('.result');

resultElements.forEach( item => {
  item.innerText = parseInt(item.innerText) * multiplyInput.value;
});

Ранее задавал подобный вопрос, по сути помогли, но с моими знаниями допилить скрипт не получилось как я хотел.
  • Вопрос задан
  • 81 просмотр
Решения вопроса 1
fallus
@fallus
Я ничего не понял, но наверное так:
window.addEventListener('load', () => {
   const multiplyInput = document.querySelector('#multiply');
   const resultElements = document.querySelectorAll('.result');

// Записать дефолтные значения в атрибут data-default-count (ну или массив там и т.п.)
   resultElements.forEach(item => {
      item.setAttribute('data-default-count', item.innerText);
   });

// после каждого изменения инпута
   multiplyInput.addEventListener('input', e => {
// перебрать все дивы
      resultElements.forEach(item => {
// значения data-default-count умножить на то, что введено в инпут(без проверок каких-то там)
         item.innerText = item.getAttribute('data-default-count') * e.target.value;
      });
   })

})


Ну или как-то так, если надо сразу это всё высчитывать. При загрузке страницы:
spoiler
window.addEventListener('load', () => {
   const multiplyInput = document.querySelector('#multiply');
   const resultElements = document.querySelectorAll('.result');

   resultElements.forEach(item => {
      item.setAttribute('data-default-count', item.innerText);
   });

   const calcData = () => {
      resultElements.forEach(item => {
         item.innerText = item.getAttribute('data-default-count') * multiplyInput.value;
      });
   }

   calcData();

   multiplyInput.addEventListener('input', calcData)

})
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
fomenkogregory
@fomenkogregory
Юниор софтварный инженер
resultElements.forEach( item => {
  item.innerText = parseInt(item.innerText) * multiplyInput.value;
});

Вот эту часть надо запускать каждый раз когда обновляется значение в инпуте
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы