lens calculator lens calculator - 1 year ago 59
HTML Question

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)

<table style>
<th>Object Distance:</th>
<th bgcolor="yellow">5 cm</th>
<td colspan="2">Spherical<br>Lens Powers<br><b>(diopters)</b></td>
<td><input id="POWERln5cm"></td>

Answer Source


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