主页 / 问题 / 743565
Accepted
3 Darin
Asked:2020-11-12 19:32:41 +0000 UTC2020-11-12 19:32:41 +0000 UTC

将输入值与输出结果相乘[关闭]

  • 772

如何将在 jquery 或 js 输入中输入的两个数字相乘并将结果放入 div 中？

<input type="number" name="num1" id="num1" value="" min="10" max="1000" step="10" required>
<input type="number" name="num2" id="num2" value="" min="10" max="1000" step="10" required>
<div id="res"></div>
javascript

2 个回答

  1. 我认为值得为 jQuery 编写一个小插件：

    $.fn.multiplicator = function(...selectors) {
  // получаем список полей ввода по селекторам
  let inputs = selectors.map(s => $(s));

  // функция перемножения всех значений полей ввода
  const recalc = () => inputs.reduce((r, $el) => r*parseFloat($el.val()), 1);

  // Навешиваем событие на все поля ввода, по которому производим пересчёт и обновление значения результата
  inputs.forEach($el => $el.on(this.data('event')||'blur', () => this.text(recalc())));
}

   
// Применяем наш плагин

$('#res').multiplicator('#arg1', '#arg2');
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id=arg1 value=1 />
<input id=arg2 value=1 />
<div id=res data-event=input></div>

    • 3
  2. Best Answer

    可以是不同的方式，其中一种选择

    var input = document.querySelectorAll('input');
var div = document.querySelector('div');
var res;
for (let i = 0; i < input.length; i++) {
  input[i].addEventListener('input', function() {
    if (inputOne.value !== '' && inputTwo.value !== '') {
      res = inputOne.value * inputTwo.value;
      div.textContent = res;
    }
  })
}
    <input id="inputOne" type="text">
<input id="inputTwo" type="text">
<div></div>

    • -1

相关问题