Как умножить значение нескольких input?

Question

[Дмитрий]

Помогите друзья!)
Нужно первый input (id="multiply") перемножить на input (class="result"), т.е. чтобы значения менялись прям внутри input

<form>
<input id="multiply" type="text" name="number" value="10">

<input class="result" type="text" name="number" value="3"> //тут должно получиться value="30"
<input class="result" type="text" name="number" value="4"> //тут должно получиться value="40"
<input class="result" type="text" name="number" value="1"> //тут должно получиться value="10"
<input class="result" type="text" name="number" value="2"> //тут должно получиться value="20"
</form>

Или в таком виде))

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

Дополняю:
Нашел единственный пример кода:

<form action="" method="post">
<input type="text" id="test">
</form>
 
<div class="result">3</div>
<div class="result">4</div>
<div class="result">6</div>
<div class="result">7</div>

var input = document.getElementById('test');
var result = document.getElementById('result');

input.onkeyup =  input.oncopy = input.onpaste = input.oncut = (function() {
    return function() {
         result.innerHTML = this.value;
    }
})();

Comments

[Alex]

Опишите всё, что вы уже сделали для решения проблемы. Не забудьте рассказать, почему тот или иной вариант действий не сработал. Это даст окружающим дополнительную информацию о вашей проблеме и сократит время поиска решения.

[Вадим]

Что на что должно умножаться? При каком событии? Куда выводиться?

[approximate solution]

Вадим, видимо при onclick, о котором он пока не знает)

[approximate solution]

Дмитрий , где ваши 80% решения, после которых мы должны выложить остальные 20?

[Дмитрий]

Вадим,

Нужно первый input (id="multiply") перемножить на input (class="result"), т.е. чтобы значения менялись прям внутри input.

В первом же коде указал)))

[Дмитрий]

approximate solution,

<form action="" method="post">
<input type="text" id="test" value="10">
</form>
 
<div id="result"></div>
<div id="result"></div>
<div id="result"></div>
<div id="result"></div>

var input = document.getElementById('test');
var result = document.getElementById('result');

input.onkeyup =  input.oncopy = input.onpaste = input.oncut = (function() {
    return function() {
         result.innerHTML = this.value;
    }
})();

[approximate solution]

Дмитрий, Так, окей.
var result = document.getElementById('result');
Я боюсь вас разочаровать, но элемент id уникален, и на странице(в вашей разметке) может быть только один.

Тут вам скорее всего подойдет class="result", и querySelectorAll('.result');

[Вадим]

Дмитрий,

Нужно первый input (id="multiply") перемножить на input (class="result"), т.е. чтобы значения менялись прям внутри input.

Внутри какого input? У вас их там 5. Внутри мультиплая? Или внутри каждого result? При каком событии? Один раз когда страница загрузилась? А если изменить значение в инпуте?

[Дмитрий]

approximate solution, Спасибо, вот попробовал иной вариант, но он срабатывает только при обновлении)

<form>
<input id="multiply" type="text" name="number" value="14">

<input class="result" type="text" name="number" value="3"> 
<input class="result" type="text" name="number" value="4"> 
<input class="result" type="text" name="number" value="1"> 
<input class="result" type="text" name="number" value="2"> 
</form>

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

resultInputs.forEach( item => {
  item.value = item.value * multiplyInput.value;
});

Answer 1

[Andrew575]

Для случая с input

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

resultInputs.forEach( item => {
	item.value = item.value * multiplyInput.value;
});

Для случая с div

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

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

Но тут вы не можете гарантировать, что внутри div изначально находится число, а в input можете

Comments

[Дмитрий]

Спасибо получилось, а возможно, чтобы менялось без обновления страницы?)

[Дмитрий]

input суммы сделан в таком виде:

<div class="num-block skin-2">
      <div class="num-in">
         <span class="minus dis">
            <div class="minusdiv">-</div>
         </span>
         <input type="text" id="multiply" name="count" class=" in-num" value="10" readonly=""> 
         <span class="plus">
            <div class="plusdiv">+</div>
         </span>
      </div>
   </div>

[Andrew575]

Дмитрий, Необходимо повесить обработчик события input на input#multiply, и вызывать функцию пересчета значений. Тогда, если менять значение с клавиатуры, будет происходить пересчет

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

function inputHandler() {
	resultInputs.forEach( item => {
    item.value = item.value * multiplyInput.value;
  });
}

inputHandler();
multiplyInput.addEventListener('input', inputHandler);

Если же значение input#multiply меняется не с клавиатуры, а после выполнения каких-то действий, например клика ну кнопку "+", необходимо вызывать функцию пересчета inputHandler() сразу после изменения input#multiply.value

[Дмитрий]

Andrew575,

необходимо вызывать функцию пересчета inputHandler() сразу после изменения input#multiply.value

У меня стилизованный input number в input text nubmer. При нажатии на + или - значение меняется. Можно ли как то, чтобы функция пересчета вызывалась на классы minus и plusdiv?

[Andrew575]

Дмитрий, значит у вас на кнопках '+' и '-' есть обработчики клика, в эти обработчики добавьте функцию пересчета

[Дмитрий]

Andrew575, Подскажите, куда впихнуть?) Я то мой уровень реально "мамкин программист", учимся)))
Я как понимаю, при уменьшении значения в #multiply результат не убавится в .result ?

/////////////////// product +/-
$(document).ready(function() {
  $('.num-in span').click(function () {
      var $input = $(this).parents('.num-block').find('input.in-num');
    if($(this).hasClass('minus')) {
      var count = parseFloat($input.val()) - 1;
      count = count < 1 ? 1 : count;
      if (count < 2) {
        $(this).addClass('dis');
      }
      else {
        $(this).removeClass('dis');
      }
      $input.val(count);
    }
    else {
      var count = parseFloat($input.val()) + 1
      $input.val(count);
      if (count > 1) {
        $(this).parents('.num-block').find(('.minus')).removeClass('dis');
      }
    }
    
    $input.change();
    return false;
  });
  
});

[Andrew575]

Дмитрий, после
$input.change();

[Дмитрий]

Andrew575, Спасибо большое)
А этот скрипт не работает на уменьшение? Т.е. там сохраняется сумма, если уменьшить значение в #multiply

[Andrew575]

Дмитрий, Скрипт работает на любое изменение input#multiply, как уменьшение, так и увеличение.
Если вы из 10 стираете 0, то конечно ничего не поменяется, так как текущее значение умножается на 1

[Дмитрий]

Andrew575, По логике скрипт работает правильно)), он преумножает значение value в input .result
Если дописать "3", а потом стереть, то будут конечно жесткие цифры)) Я просто рассчитывал на логику:
<input type="number">, чтобы он умножал на число, указанное в нем)

[Дмитрий]

Andrew575, Я думаю допилить какой нибудь обновление "ajax" к этому моменту, наверное должен работать как хотелось бы.

[Andrew575]

Дмитрий, не очень понимаю нынешнюю формулировку задачи, но если необходимо, чтобы перемножались #multiply.value (которое меняется) и .result.value (которое было изначально, например 3 для первого .result.value и всегда продолжать перемножать на него), то необходимо записать это значение в переменную, и затем использовать его

[Дмитрий]

Andrew575, Возможно я не правильно поставил задачу, видимо из-за неопытности, за это прошу прощения). Но всё же, вы мне помогли!)