I need help with java script code for changing the value of one input field from another input field and vice versa.

I am building a calculator similar to the Zillow Mortgage Calculator and when you input the down payment %, the down payment dollar amount updates, and it works vice versa, if you input the dollar amount the percentage field updates.

zillow calculator link: /

here is the Javascript code I am using and it only works one way not the other. thank you for any help.

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

I need help with java script code for changing the value of one input field from another input field and vice versa.

I am building a calculator similar to the Zillow Mortgage Calculator and when you input the down payment %, the down payment dollar amount updates, and it works vice versa, if you input the dollar amount the percentage field updates.

zillow calculator link: https://www.zillow./mortgage-calculator/

here is the Javascript code I am using and it only works one way not the other. thank you for any help.

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

• javascript

• why would you do x.value = x.value........ I think you messed up the variable names – Charlie Ng Commented Feb 14, 2018 at 21:09
• Just modifying your code slightly.. jsbin./basagus/edit?html,js,output – bp4D Commented Feb 14, 2018 at 21:17

3 Answers 3

The problem is that you're never setting the value of x to be equal to the value of y. And even if you were to do this, considering you're calling the same function both times, the value would immediately get overwritten.

What you want to do is make use of two separate functions that update one another.

Note that you're probably also looking to trigger the function on input rather on change.

Finally, you'll want to extrapolate the logic, and make use of 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">

Just bind the input event to both input fields.

• Execute getElementById function only once to improve performance.

var fname = document.getElementById('fname');
var james = document.getElementById('james');

fname.addEventListener('input', function() {
  james.value = this.value;
});

james.addEventListener('input', function() {
  fname.value = this.value;
});

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

You actually need to detect a change:

 var prev;

 function updateCalculator() {
    var x = document.getElementById("fname");
    var y = document.getElementById("james");
    if(x.value != prev){
      prev = y.value = x.value;
    } 
    if(y.value != prev){
      prev = x.value = y.value;
    }           
 }