Обновлять входное значение динамически и обновлять другой элемент после динамического изменения ввода - PullRequest
Новая
       18

Обновлять входное значение динамически и обновлять другой элемент после динамического изменения ввода

0 голосов
/ 12 ноября 2018

Ниже приведен пример HTML и JS, которые я создал для проблемы, с которой я столкнулся. У меня есть форма, которая имеет три входа. Значение из первых двух входов будет определять значение третьего. Я также хочу, чтобы значения всех трех входов отображались в тегах <p> за пределами формы. Мне удалось правильно обновить первые два тега <p> вне формы, и я смог правильно обновить третье входное значение. Однако я не могу получить третий тег <p> для обновления, когда третье входное значение динамически изменяется.

Вот кодекс для проблемы.

HTML 

<form>
  <input id="one" type="number" class="sumVari" name="a"> 
  <input id="two" type="number" class="sumVari" name="b">
  <input id="three" type="number" name="sum" placeholder="sum of a & b">
</form>
<div id="displayValues">
  <p>The value of a is: <span id="a"></span> </p>
  <p>The value of a is: <span id="b"></span></p>
  <p>The value of the sum is: <span id="sum"></span></p>
</div>

JS 

let one = $('#one');
let two = $('#two');
let three = $('#three');

$('form').on('change', 'input', function() {
  let target = $(this);
  let attrName = target.attr('name');

  $('#'+attrName).text(target.val());
});

function sum(a,b) {
  return a+b;
}

$('.sumVari').each(function(){
  $(this).change(function(){
    if(one.val() != '' && two.val() != '') {
      three.val(sum(one.val(), two.val()));
    }
  });
});

1 Ответ

0 голосов
/ 12 ноября 2018
  1. Вызывать событие изменения вручную, когда ставить значение на сумму 

let one = $('#one');
let two = $('#two');
let three = $('#three');

$('form').on('change', 'input', function() {
  let target = $(this);
  let attrName = target.attr('name');

  $('#' + attrName).text(target.val());
});

function sum(a, b) {
  return a + b;
}

$('.sumVari').each(function() {
  $(this).change(function() {
    if (one.val() != '' && two.val() != '') {
      three.val(sum(one.val(), two.val())).change();//call the change event manually here on the sum input so that the change function will run on the sum input
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input id="one" type="number" class="sumVari" name="a">
  <input id="two" type="number" class="sumVari" name="b">
  <input id="three" type="number" name="sum" placeholder="sum of a & b">
</form>
<div id="displayValues">
  <p>The value of a is: <span id="a"></span> </p>
  <p>The value of a is: <span id="b"></span></p>
  <p>The value of the sum is: <span id="sum"></span></p>
</div>
...