How do I call a function when the value in an input field changes so that the value created by the function displays in a different input field?
The user inputs a value in the first input field which determines the value in the second input field. I am trying to get the second input field to determine the value in a third input field. I want this action to be automatic as soon as a value shows up in the second field.
What's the proper way to call this function?
function ln5cmpower(npml, dbel) {
powerln5cm = ((1/.05)+(1/-(document.getElementById("npml").value-(document.getElementById("dbel").value/100))));
document.getElementById("POWERln5cm").value = Math.round(powerln5cm*100)/100;
}
How would I get this input field to call the previous function correctly? (second field)
Near Point <input id="npml" onkeyup="convert1('NPML')" onchange="ln5cmpower('npml')">
I also need the function to use this data: (additional field)
Distance between eye and lens:
<input type="number" id="dbel" value="1" step="0.1" min="0">
<b> centimeter(s)</b><br><br>
How would I get the value of the function to display in this text box within the table? (third field)
<br><br>
<table style>
<tr>
<th>Object Distance:</th>
<th bgcolor="yellow">5 cm</th>
<td></td>
<th>Left</th>
<th>Right</th>
</tr>
<tr>
<td colspan="2">Spherical<br>Lens Powers<br><b>(diopters)</b></td>
<td>Nearest</td>
<td><input id="POWERln5cm"></td>
<td></td>
</tr>
</table>
Update
After reading your comment, I decided to write a new answer that better fits your requirements. For max flexibility, set all your inputs to trigger the same function when they change
<input id='input0' onchange='updateInputs(event);'/>
<input id='input1' onchange='updateInputs(event);'/>
<input id='input2' onchange='updateInputs(event);'/>
In Javascript this function will update inputs 2 and 3. It allows input1 to be bypassed if there is enough data in input0 and input2 to find input3's value
function updateInputs(event){
var input0 = document.getElementById('input0');
var input1 = document.getElementById('input1');
var input2 = document.getElementById('input2');
var input3 = document.getElementById('input3');
//if a change to input1 triggered this, use its value to update 2
if(event.target === input1){
input2.value = compute2(input1.value);
}
//at this point, input2 has been updated automatically but only
//if we got here as a result of an input1 change.
//capture what you need to compute 3
var value0 = input0.value;
var value2 = input2.value;
//if we have all the data we need, compute 3. This means that if
//input2 is blank, perhaps because user just changed input0, we
//will skip this block
if(value0!='' && value2!=''){
input3.value = compute3(value0,value2);
}
}
Original, accepted answer
You're trying to get the 2nd input field to call the function that will update the 3rd input field, creating the domino:
User changes input 1 >> code changes input 2 >> input 2 code changes input 3
Because you want both 2 and 3 to change whenever 1 changes, a better approach would be
User changes input 1 >> code changes inputs 2 & 3
Add an onchange attribute to the first input. The value of that attribute should be a function that updates the 2nd and 3rd inputs.
<input id='input1' onchange="update_2_and_3(event);"/>
Then in javascript:
function update_2_and_3(event){
var value1 = event.target.value;
//compute the value for and update input2
var value2 = compute2_from1(value1);
document.getElementById('input2').value = value2;
//compute the value for and update input3
var value3 = compute3_from2(value2);
document.getElementById('input3').value = value3;
}
If one of your compute functions needs more information from another input, you can grab it with document.getElementById('id').value