# Beginner, Table Work - Need Help with Multiplying Row Inputs to Show Calculation In Another Cell

## Recommended Posts

I am a super beginner, never did any of this before.  I am trying to get the following two rows to calculate using ID and GetElementByID  ... I would like Interval 1 Hydrostatic Pressure to calculate by referring to two other cells within the same column

Formula is:  Interval 1 Ending Depth TVD * Interval 1 Ending MW * 0.052

<!DOCTYPE html>
<html>
<style>
table {
font-family: Arial Narrow, Arial Narrow;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
}

tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<body>

<h1 style="text-align:center; font-family:Arial Narrow; color:#cc7a00; text-shadow: #000 0px 1px 1px; -webkit-font-smooothing: antialiased; font-size:300%; line-height:20px">Test</h1>
<h3 style="text-align:center; font-family:Arial Narrow; color:#cc7a00; text-shadow: #000 0px 1px 1px; -webkit-font-smooothing: antialiased; font-size:200%; line-height:20px">Test Calculator</h3>
<h2 style="text-align:left; font-family:Arial Narrow; color:#cc7a00; line-height:30px">Customer & Well Info</h2>

<form>
Customer Name:<br>
<input type="text" name="Customer Name"><br>
Well Name:<br>
<input type="text" name="Well Name"><br>
Rig Name:<br>
<input type="text" name="Rig Name"><br>
Location:<br>
<input type="text" name="Location"><br>
API #:<br>
<input type="text" name="API #"><br>
Representative:<br>
<input type="text" name="Representative"><br>
</form>

<p></p>

<h2 style="text-align:left; font-family:Arial Narrow; color:#cc7a00; line-height:30px">Interval Analysis</h2>
<h3 style="text-align:left; font-family:Arial Narrow; color:#cc7a00; line-height:30px">General Data</h3>

<table style="width:100%">
<tr>
<th></th>
<th>Interval 1</th>
<th>Interval 2</th>
<th>Interval 3</th>
<th>Interval 4</th>
<th>Interval 5</th>
<th>Interval 6</th>
<th>Interval 7</th>
</tr>
<tr>
<td>Section Title (Hole Size)</td>
<th><input type="text" name="Interval-1-SectionTitle"></th>
<th><input type="text" name="Interval-2-SectionTitle"></th>
<th><input type="text" name="Interval-3-SectionTitle"></th>
<th><input type="text" name="Interval-4-SectionTitle"></th>
<th><input type="text" name="Interval-5-SectionTitle"></th>
<th><input type="text" name="Interval-6-SectionTitle"></th>
<th><input type="text" name="Interval-7-SectionTitle"></th>
</tr>
<tr>
<td>Fluid System Used</td>
<th><input type="text" name="Interval-1-FluidSystem"></th>
<th><input type="text" name="Interval-2-FluidSystem"></th>
<th><input type="text" name="Interval-3-FluidSystem"></th>
<th><input type="text" name="Interval-4-FluidSystem"></th>
<th><input type="text" name="Interval-5-FluidSystem"></th>
<th><input type="text" name="Interval-6-FluidSystem"></th>
<th><input type="text" name="Interval-7-FluidSystem"></th>
</tr>
<tr>
<td>Staring Depth (MD)</td>
<th><input type="number" name="Interval-1-StartMD" min="0"></th>
<th><input type="number" name="Interval-2-StartMD" min="0"></th>
<th><input type="number" name="Interval-3-StartMD" min="0"></th>
<th><input type="number" name="Interval-4-StartMD" min="0"></th>
<th><input type="number" name="Interval-5-StartMD" min="0"></th>
<th><input type="number" name="Interval-6-StartMD" min="0"></th>
<th><input type="number" name="Interval-7-StartMD" min="0"></th>
</tr>
<tr>
<td>Ending Depth (MD)</td>
<th><input type="number" name="Interval-1-EndMD" min="0"></th>
<th><input type="number" name="Interval-2-EndMD" min="0"></th>
<th><input type="number" name="Interval-3-EndMD" min="0"></th>
<th><input type="number" name="Interval-4-EndMD" min="0"></th>
<th><input type="number" name="Interval-5-EndMD" min="0"></th>
<th><input type="number" name="Interval-6-EndMD" min="0"></th>
<th><input type="number" name="Interval-7-EndMD" min="0"></th>
</tr>
<tr>
<td>Starting Depth (TVD)</td>
<th><input type="number" name="Interval-1-StartTVD" min="0"></th>
<th><input type="number" name="Interval-2-StartTVD" min="0"></th>
<th><input type="number" name="Interval-3-StartTVD" min="0"></th>
<th><input type="number" name="Interval-4-StartTVD" min="0"></th>
<th><input type="number" name="Interval-5-StartTVD" min="0"></th>
<th><input type="number" name="Interval-6-StartTVD" min="0"></th>
<th><input type="number" name="Interval-7-StartTVD" min="0"></th>
</tr>
<tr>
<td>Ending Depth (TVD)</td>
<th><input type="number" name="Interval-1-EndTVD" min="0"></th>
<th><input type="number" name="Interval-2-EndTVD" min="0"></th>
<th><input type="number" name="Interval-3-EndTVD" min="0"></th>
<th><input type="number" name="Interval-4-EndTVD" min="0"></th>
<th><input type="number" name="Interval-5-EndTVD" min="0"></th>
<th><input type="number" name="Interval-6-EndTVD" min="0"></th>
<th><input type="number" name="Interval-7-EndTVD" min="0"></th>
</tr>
<tr>
<td>Interval Start Mud Weight (lb/gal)</td>
<th><input type="number" name="Interval-1-StartMW" min="0" step="0.01"></th>
<th><input type="number" name="Interval-2-StartMW" min="0" step="0.01"></th>
<th><input type="number" name="Interval-3-StartMW" min="0" step="0.01"></th>
<th><input type="number" name="Interval-4-StartMW" min="0" step="0.01"></th>
<th><input type="number" name="Interval-5-StartMW" min="0" step="0.01"></th>
<th><input type="number" name="Interval-6-StartMW" min="0" step="0.01"></th>
<th><input type="number" name="Interval-7-StartMW" min="0" step="0.01"></th>
</tr>
<tr>
<td>Interval End Mud Weight (lb/gal)</td>
<th><input type="number" name="Interval-1-EndMW" min="0" step="0.01"></th>
<th><input type="number" name="Interval-2-EndMW" min="0" step="0.01"></th>
<th><input type="number" name="Interval-3-EndMW" min="0" step="0.01"></th>
<th><input type="number" name="Interval-4-EndMW" min="0" step="0.01"></th>
<th><input type="number" name="Interval-5-EndMW" min="0" step="0.01"></th>
<th><input type="number" name="Interval-6-EndMW" min="0" step="0.01"></th>
<th><input type="number" name="Interval-7-EndMW" min="0" step="0.01"></th>
</tr>
<tr>
<td>Interval TD Hydrostaic Pressure (psi)</td>
<th> id="Interval-1-Hydrostatic"
<script>
var a = "Interval-1-EndTVD"
var b = "Interval-1-EndMW"
var c = 0.052
var z = a * b * c;
document.getElementById("Interval-1-Hydrostatic").innerHTML = z;
</script>
</th>

</tr>
<tr>
<td>Max Inclination (deg)</td>
</tr>
<tr>
<td>Interval Footage (MD)</td>
</tr>
<tr>
<td>Interval Footage (ft)</td>
</tr>
<tr>
<td>Expected Avg. ROP (ft/hr)</td>
</tr>
<tr>
<td>Expected Hours to Drill</td>
</tr>
<tr>
<td>Expected Days to Drill</td>
</tr>
</table>

</body>
</html>

##### Share on other sites

You need to do the calculation like this, you don't just write the ID as a string and assume it's going to get the value of an input element with that ID:

`var z = document.getElementById(a).value * document.getElementById(b).value * c;`

You also need an event when that code runs.  Events are things like clicking on a button, or pressing a key, or changing the value of an input.  Look up event handlers and put your calculation code in an event handler for whatever event you want to use.  Right now your code only runs once, when the page loads, so it's not going to respond to any events like filling in the various inputs.

##### Share on other sites

so, like this to fix it?  I will look into the event.  Considering I've got hundreds of calculations to do, is there not a better way to do this?  I'm taking a book I wrote in excel and trying to make an actual program out of it.

<tr>
<td>Interval TD Hydrostaic Pressure (psi)</td>
<th> id="Interval-1-Hydrostatic"
<script>
var a = "Interval-1-EndTVD"
var b = "Interval-1-EndMW"
var c = 0.052
var z = document.getElementByID(a).value * document.getElementByID(b).value * c;
document.getElementById("Interval-1-Hydrostatic").innerHTML = z;
</script>
</th>

##### Share on other sites

If you put the ID in the right place on the element then that would work to update the innerHTML for that one element when the page loads.

If all of the calculations are the same then have a function that takes whatever values change.  You only need to write it once.

```function calculate_pressure(a, b, dest) {
var c = 0.052;
document.getElementById(dest).innerHTML = document.getElementByID(a).value * document.getElementByID(b).value * c;
}```

When you call that function you can pass the parameters to tell it what to do, e.g.:

<button onclick="calculate_pressure('Interval-1-EndTVD', 'Interval-1-EndMW', 'Interval-1-Hydrostatic');">Update</button>

## Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

×   Pasted as rich text.   Paste as plain text instead

Only 75 emoji are allowed.

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.