Jump to content

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

DwnWrdSprl11

By DwnWrdSprl11
in JavaScript

 Share

Recommended Posts

DwnWrdSprl11 Newbie

DwnWrdSprl11

Posted
Posted

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>

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

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.

Link to comment
Share on other sites
DwnWrdSprl11 Newbie

DwnWrdSprl11

Posted
  • Author
Posted

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>

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

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>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...