javascript - 在 Javascript 中根据另一个输入的值更改输入值，反之亦然

Question

我需要 Java 脚本代码方面的帮助，以便从一个输入字段更改另一个输入字段的值，反之亦然。

我正在构建一个类似于 Zillow 抵押计算器的计算器，当您输入首付百分比时，首付金额会更新，反之亦然，如果您输入美元金额，百分比字段会更新。

zillow计算器链接:https://www.zillow.com/mortgage-calculator/

这是我正在使用的 Javascript 代码，它只能以一种方式工作，而不能以另一种方式工作。 感谢您的帮助。

<input type="text" id="fname" onchange="myFunction()">
<br><br>
<input type="text" id="james" onchange="myFunction()">


<script>
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value;

var y = document.getElementById("james");
y.value = x.value;

}
</script>

Answer 1

问题是您从未将x 的值设置为等于y 的值。即使您要这样做，考虑到您两次调用相同的函数，该值也会立即被覆盖。

您想要做的是利用两个相互更新的独立函数。

请注意，您可能还希望在 input 上触发该功能。 而不是change 。

最后，您需要推断逻辑，并利用 addEventListener() :

document.getElementById("fname").addEventListener("input", function(){
    document.getElementById("james").value = this.value;
});

document.getElementById("james").addEventListener("input", function(){
    document.getElementById("fname").value = this.value;
});

<input type="text" id="fname">
<br><br>
<input type="text" id="james">