Jump to content
Sign in to follow this  
DwnWrdSprl11

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

Your help is appreciated!

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

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<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 this post


Link to post
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 this post


Link to post
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 this post


Link to post
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>

Share this post


Link to post
Share on other sites

Join the conversation

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

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

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

Loading...
Sign in to follow this  

×
×
  • Create New...