javascript - jquery 两个数字输入，如果另一个输入发生更改，则自动重新计算每个输入

Question

我擅长 html，但不太擅长 javascript :(我已经在 stackoverflow 上进行了搜索并用谷歌搜索了它，但没有找到我真正需要的东西，我发现的唯一或多或少接近我需要的是 http://jsfiddle.net/mrobin/QWSQp/64/

但我需要的是两个输入:

<input type="text" name="num1" maxlength="15" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" value="">
<input type="text" name="num2" maxlength="15" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" value="" >

两者都设置了规则，即只有一个点的数字才可用:

oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');

现在问题，我有一个由 php 插入的 X 值

<?=$eur_price ?>

要点是创建两个输入，其中一个是数量，第二个是总价，但每个字段都可以编辑，如果编辑一个字段，则应重新计算另一个字段。

示例:

X=1.5 (set price) ... Num1=10 so Num2 would be calculated to 15

X=1.5 (set price) ... Num2=6 so Num1 would be calculated to 4And so on...So you can set how many u need or how much u would like to spend...

有什么帮助如何做到这一点，或者如何编辑我找到的示例吗？

Answer 1

分离逻辑中的职责以重用代码

• 创建一个事件，即:计算并将其绑定(bind)到num2。
• 从 num1 的 input 事件调度该事件。

  The first two step must be applied to element num2.

• 将 id 添加到您的输入中以获得更好的性能。
• 移动逻辑以接受数字和一个点到事件输入。

看看这段代码

通过这种方法，您可以从任何地方触发事件计算

const calculate = new Event('calculate');

let n1 = document.getElementById("num1");
let n2 = document.getElementById("num2");
let eurPrice = 1.5;

// -------- num1 logic ---------
n1.addEventListener("input", function(e) {
  this.value = this.value.replace(/[^0-9.]/g, '');
  this.value = this.value.replace(/(\..*)\./g, '$1');    
  n2.dispatchEvent(calculate);
});

n1.addEventListener('calculate', function(e) {
  this.value = (n2.value / eurPrice).toFixed(2);
});

// -------- num2 logic ---------
n2.addEventListener("input", function(e) {
  this.value = this.value.replace(/[^0-9.]/g, '');
  this.value = this.value.replace(/(\..*)\./g, '$1');
  
  n1.dispatchEvent(calculate);
});

n2.addEventListener('calculate', function(e) {
  this.value = (n1.value * eurPrice).toFixed(2);
});

<input type="text" id="num1" name="num1" maxlength="15" value="">
<input type="text" id='num2' name="num2" maxlength="15" value="">