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

Question

[Дмитрий]

Нужно, чтобы 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;
});

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

Answer 1

[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)

})

Comments

[Дмитрий]

Спасибо!, то что нужно!)

[Дмитрий]

В коде я к каждому классу, id, переменной добавил свой id, так как у меня будут несколько таких скриптов на странице.
Выглядит это вот так:

window.addEventListener('load', () => {
   const multiplyInput{$product.id} = document.querySelector('#multipl{$product.id}');
   const resultElements{$product.id} = document.querySelectorAll('.result{$product.id}');
   resultElements{$product.id}.forEach(item => {
      item.setAttribute('data-default-count{$product.id}', item.innerText);
   });
   multiplyInput{$product.id}.addEventListener('input', e => {
      resultElements{$product.id}.forEach(item => {
         item.innerText = item.getAttribute('data-default-count{$product.id}') * e.target.value;
      });
   })

})

На выходе получается следующее:

window.addEventListener('load', () => {
   const multiplyInput734 = document.querySelector('#multiply734');
   const resultElements734 = document.querySelectorAll('.result734');
   resultElements734.forEach(item => {
      item.setAttribute('data-default-count734', item.innerText);
   });
   multiplyInput734.addEventListener('input', e => {
      resultElements734.forEach(item => {
         item.innerText = item.getAttribute('data-default-count734') * e.target.value;
      });
   })

})

Где ошибку допустил?) В проверке инженерного меню показывает пустую строку.

[fallus]

Дмитрий, да хз. Тут надо глобально всё пересматривать, чтобы написать более менее вменяемый код.

А так, быть может дело в 2

const multiplyInput{$product.id} = document.querySelector('#multiply2{$product.id}');
const resultElements{$product.id} = document.querySelectorAll('.result2{$product.id}');

[Дмитрий]

fallus, Спасибо!), не заметил сразу двойку)
невнимательность...

[Дмитрий]

fallus, А реально ли это провернуть через такую функцию? Попробовал, он преумножает до бесконечности)

function test(){
//код
}
 
setInterval( test, 5 * 1000 );

Answer 2

[G F]

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

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