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?
Near Point <input id="npml" onkeyup="convert1('NPML')" onchange="ln5cmpower('npml')">
<input id="npmr" onkeyup="convert2('NPMR')"><br>
How would I get the value of the function to display in this text box within the table?
<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></td> <!--here-->
<td></td>
</tr>
</table>
Here is the whole this put together, just to give you a reference point, minus the function, and the call in the second field stated above
<!DOCTYPE html>
<html>
<!-- Short Version -->
<!-- Program by pen name: Lens Analyzer -->
<head>
<title>Lens Analysis Tool</title>
</head>
<style>
table, th, td {
border: 1px solid black;
padding: 5px;
text-align: center;
}
table {
border-collapse: collapse;
}
</style>
<!-- This part of the program prompts the user to input a maximum of 3 variables. -->
<body>
<p>Insert your near point for each eye below.<br><br>
Adjust the distance between your eye and the lens as needed.</p>
Distance between eye and lens:
<input type="number" id="dbel" value="1" step="0.1" min="0">
<b> centimeter(s)</b><br><br>
<b>           
inches           
             
meters</b><br>
     
Left         
Right         
     
Left         
Right<br>
Near Point <input id="npil" onkeyup="convert1('NPIL')">
<input id="npir" onkeyup="convert2('NPIR')"> 
Near Point <input id="npml" onkeyup="convert1('NPML')">
<!-- Call to function goes here -->
<input id="npmr" onkeyup="convert2('NPMR')"><br>
<!-- This is the table which will display two lens powers. -->
<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></td> <!-- 3rd input field goes here to display value -->
<td></td> <!-- of POWERln5cm -->
</tr>
</table>
</body>
<!-- The first 2 functions will convert the distance values
between inches and meters.
I will need to reuse the values:
"npml" "npmr" and also "dbel" from the body above
to use in more functions.
(34*2=68)
I will end up with 34 tables, each with 2 calculation results.
But I just need help with the first one to get me going.
The second 2 functions will calculate lens powers from the variables
"npml" "npmr" and "dbel". How do I display the results
of the second two functions in the table above?
-->
<script>
function convert1(distance1) {
if (distance1 == "NPIL") {
NPML = document.getElementById("npil").value * .0254;
document.getElementById("npml").value = Math.round(NPML*1000) / 1000;
} else {
NPIL = document.getElementById("npml").value * 39.3701;
document.getElementById("npil").value = Math.round(NPIL*16) / 16;
}
}
function convert2(distance2) {
if (distance2 == "NPIR") {
NPMR = document.getElementById("npir").value * .0254;
document.getElementById("npmr").value = Math.round(NPMR*1000) / 1000;
} else {
NPIR = document.getElementById("npmr").value * 39.3701;
document.getElementById("npir").value = Math.round(NPIR*16) / 16;
}
}
// The next 2 functions will calculate lens powers from the variables
// "npml" "npmr" and "dbel"
// for an object distance of 0.05 meters or 5 cm.
// Function to be inserted here.
</script>
</html>