Jump to content

How Do I Make These Calculations?


DwnWrdSprl11

Recommended Posts

I have a table I've built that is going to have a lot of user input.  From the input there are going to be numerous calculations to be found.  So I have the table set up, but I don't know how to write the code to get the calculations to work... something like Excel.

1. Row "Interval TD Hydrostatic Pressure (psi) is calculated (in respective column) by: "Ending Depth (TVD)" * "End Mud Weight (lb/gal) * 0.052

2. Row "Interval Footage (ft)" is calculated (in respective column) by: "Ending Depth (MD)" - "Starting Depth (MD)"

3. Row "Expected Hours to Drill" is calculated (in respective column) by: "Interval Footage (ft)" / Expected Avg. ROP (ft/hr)

 

So, what would the JavaScript look like at the bottom of the code in the body?  What do I need to put in to calculate the formula upon data entry in between the <th></th> for every combination of row/column?

 

Here's the code:

<!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>

<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>Staring Depth (MD)</td>
    <th><input type="number" id="Interval-1-StartMD" name="Interval-1-StartMD" min="0"></th>
    <th><input type="number" id="Interval-2-StartMD" name="Interval-2-StartMD" min="0"></th>
    <th><input type="number" id="Interval-3-StartMD" name="Interval-3-StartMD" min="0"></th>
    <th><input type="number" id="Interval-4-StartMD" name="Interval-4-StartMD" min="0"></th>
    <th><input type="number" id="Interval-5-StartMD" name="Interval-5-StartMD" min="0"></th>
    <th><input type="number" id="Interval-6-StartMD" name="Interval-6-StartMD" min="0"></th>
    <th><input type="number" id="Interval-7-StartMD" name="Interval-7-StartMD" min="0"></th>
  </tr>
  <tr>
    <td>Ending Depth (MD)</td>
    <th><input type="number" id="Interval-1-EndMD" name="Interval-1-EndMD" min="0"></th>
    <th><input type="number" id="Interval-2-EndMD" name="Interval-2-EndMD" min="0"></th>
    <th><input type="number" id="Interval-3-EndMD" name="Interval-3-EndMD" min="0"></th>
    <th><input type="number" id="Interval-4-EndMD" name="Interval-4-EndMD" min="0"></th>
    <th><input type="number" id="Interval-5-EndMD" name="Interval-5-EndMD" min="0"></th>
    <th><input type="number" id="Interval-6-EndMD" name="Interval-6-EndMD" min="0"></th>
    <th><input type="number" id="Interval-7-EndMD" name="Interval-7-EndMD" min="0"></th>
  </tr>
  <tr>
    <td>Ending Depth (TVD)</td>
    <th><input type="number" id="Interval-1-EndTVD" name="Interval-1-EndTVD" min="0"></th>
    <th><input type="number" id="Interval-2-EndTVD" name="Interval-2-EndTVD" min="0"></th>
    <th><input type="number" id="Interval-3-EndTVD" name="Interval-3-EndTVD" min="0"></th>
    <th><input type="number" id="Interval-4-EndTVD" name="Interval-4-EndTVD" min="0"></th>
    <th><input type="number" id="Interval-5-EndTVD" name="Interval-5-EndTVD" min="0"></th>
    <th><input type="number" id="Interval-6-EndTVD" name="Interval-6-EndTVD" min="0"></th>
    <th><input type="number" id="Interval-7-EndTVD" name="Interval-7-EndTVD" min="0"></th>
  </tr>
  <tr>
   <td>Interval End Mud Weight (lb/gal)</td>
    <th><input type="number" id="Interval-1-EndMW" name="Interval-1-EndMW" min="0" step="0.01"></th>
    <th><input type="number" id="Interval-2-EndMW" name="Interval-2-EndMW" min="0" step="0.01"></th>
    <th><input type="number" id="Interval-3-EndMW" name="Interval-3-EndMW" min="0" step="0.01"></th>
    <th><input type="number" id="Interval-4-EndMW" name="Interval-4-EndMW" min="0" step="0.01"></th>
    <th><input type="number" id="Interval-5-EndMW" name="Interval-5-EndMW" min="0" step="0.01"></th>
    <th><input type="number" id="Interval-6-EndMW" name="Interval-6-EndMW" min="0" step="0.01"></th>
    <th><input type="number" id="Interval-7-EndMW" name="Interval-7-EndMW" min="0" step="0.01"></th>
  </tr>
  <tr>
    <td>Interval TD Hydrostatic Pressure (psi)</td>
  </tr>
  <tr>
   <td>Interval Footage (ft)</td>
  </tr>
  <tr>
   <td>Expected Avg. ROP (ft/hr)</td>
       <th><input type="number" id="Interval-1-ROP" name="Interval-1-ROP" min="0"></th>
    <th><input type="number" id="Interval-2-ROP" name="Interval-2-ROP" min="0"></th>
    <th><input type="number" id="Interval-3-ROP" name="Interval-3-ROP" min="0"></th>
    <th><input type="number" id="Interval-4-ROP" name="Interval-4-ROP" min="0"></th>
    <th><input type="number" id="Interval-5-ROP" name="Interval-5-ROP" min="0"></th>
    <th><input type="number" id="Interval-6-ROP" name="Interval-6-ROP" min="0"></th>
    <th><input type="number" id="Interval-7-ROP" name="Interval-7-ROP" min="0"></th>
  </tr>
  <tr>
   <td>Expected Hours to Drill</td>
     </tr>

</table>
</body>
</html>

 

Edited by DwnWrdSprl11
Link to comment
Share on other sites

If you want the calculated values to each go in a cell like in the rest of the table, the first thing to do is to make the cells that will hold the calculated values.  Your rows that you want to calculate only have one cell.  Also, th cells are supposed to go in the head of a table, the body would normally contain td cells.  Add the cells that will be the placeholders for the calculations and then you can write your code to do the calculations.  It's also better to use the code box in the forum when you're posting code.

Link to comment
Share on other sites

Let's simplify this.. let's only look at one calculation.  I need the entire row calculated.  the calculation is "Ending Depth TVD" * "Interval End MW (lb/gal)" * 0.052

so in interval 1, lets say End Depth TVD is entered in as 10,000, then Interval End MW is entered in as 12.0...

the (cell) for interval 1 on Interval TD Hydrostatic Pressure (psi) should show 6,240  

 

How do i get that to run?

 

<!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>


<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>Ending Depth (TVD)</td>
	<th><input type="number" id="Interval-1-EndTVD" name="Interval-1-EndTVD" min="0"></th>
	<th><input type="number" id="Interval-2-EndTVD" name="Interval-2-EndTVD" min="0"></th>
	<th><input type="number" id="Interval-3-EndTVD" name="Interval-3-EndTVD" min="0"></th>
	<th><input type="number" id="Interval-4-EndTVD" name="Interval-4-EndTVD" min="0"></th>
	<th><input type="number" id="Interval-5-EndTVD" name="Interval-5-EndTVD" min="0"></th>
	<th><input type="number" id="Interval-6-EndTVD" name="Interval-6-EndTVD" min="0"></th>
	<th><input type="number" id="Interval-7-EndTVD" name="Interval-7-EndTVD" min="0"></th>
  </tr>
  
  <tr>
   <td>Interval End Mud Weight (lb/gal)</td>
	<th><input type="number" id="Interval-1-EndMW" name="Interval-1-EndMW" min="0" step="0.01"></th>
	<th><input type="number" id="Interval-2-EndMW" name="Interval-2-EndMW" min="0" step="0.01"></th>
	<th><input type="number" id="Interval-3-EndMW" name="Interval-3-EndMW" min="0" step="0.01"></th>
	<th><input type="number" id="Interval-4-EndMW" name="Interval-4-EndMW" min="0" step="0.01"></th>
	<th><input type="number" id="Interval-5-EndMW" name="Interval-5-EndMW" min="0" step="0.01"></th>
	<th><input type="number" id="Interval-6-EndMW" name="Interval-6-EndMW" min="0" step="0.01"></th>
	<th><input type="number" id="Interval-7-EndMW" name="Interval-7-EndMW" min="0" step="0.01"></th>
  </tr>
  <tr>
    <td>Interval TD Hydrostaic Pressure (psi)</td>
    	<th></th>
	<th></th>
	<th></th>
	<th></th>
	<th></th>
	<th></th>
	<th></th>

  </tr>
  
</table>

</body>
</html>

 

Link to comment
Share on other sites

You can use document.getElementById to get the values in the inputs and do your calculation, but if you want to put the result in another element then give the target element an ID also.

For the Javascript code, put your calculation in a function, pass anything that might differ (like the IDs to get and set), and pick an event when you want to run the function.  You showed using the change event earlier, that would work.

Link to comment
Share on other sites

So, it's still not working.. what do I have wrong here?  I type in numbers in the cells and it doesn't populate the hydrostatic.  

<!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>




<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>Ending Depth (TVD)</td>
	<th><input type="number" id="Interval-1-EndTVD" name="Interval-1-EndTVD" min="0"></th>
	<th><input type="number" id="Interval-2-EndTVD" name="Interval-2-EndTVD" min="0"></th>
	<th><input type="number" id="Interval-3-EndTVD" name="Interval-3-EndTVD" min="0"></th>
	<th><input type="number" id="Interval-4-EndTVD" name="Interval-4-EndTVD" min="0"></th>
	<th><input type="number" id="Interval-5-EndTVD" name="Interval-5-EndTVD" min="0"></th>
	<th><input type="number" id="Interval-6-EndTVD" name="Interval-6-EndTVD" min="0"></th>
	<th><input type="number" id="Interval-7-EndTVD" name="Interval-7-EndTVD" min="0"></th>
  </tr>
  <tr>
   <td>Interval End Mud Weight (lb/gal)</td>
	<th><input type="number" id="Interval-1-EndMW" name="Interval-1-EndMW" min="0" step="0.01"></th>
	<th><input type="number" id="Interval-2-EndMW" name="Interval-2-EndMW" min="0" step="0.01"></th>
	<th><input type="number" id="Interval-3-EndMW" name="Interval-3-EndMW" min="0" step="0.01"></th>
	<th><input type="number" id="Interval-4-EndMW" name="Interval-4-EndMW" min="0" step="0.01"></th>
	<th><input type="number" id="Interval-5-EndMW" name="Interval-5-EndMW" min="0" step="0.01"></th>
	<th><input type="number" id="Interval-6-EndMW" name="Interval-6-EndMW" min="0" step="0.01"></th>
	<th><input type="number" id="Interval-7-EndMW" name="Interval-7-EndMW" min="0" step="0.01"></th>
  </tr>
  <tr>
    <td>Interval TD Hydrostatic Pressure (psi)</td>
    <th id="Interval-1-Hydrostatic"></th>
    <th></th>
	<th></th>
	<th></th>
	<th></th>
	<th></th>
	<th></th>

  </tr>

</table>
<script>
	var a = "Interval-1-EndTVD";
    var b = "Interval-1-EndMW";
    
    function processChanges1() {
    var val1 = document.getElementByID(a).value;
    var val2 = document.getElementByID(b).value;

    //Substitute actual validation here
    if (val1 > 0 && val2 > 0) {
    var z = val1 * val2 * 0.052;
    document.getElementById("Interval-1-Hydrostatic").innerHTML = z;
               }
              }
</script>


</body>
</html>

 

Link to comment
Share on other sites

You require event to call the function as mention onchange="processChanges1()"

You could directly add the id ref to arguments of function called

	onchange="processChanges1(this,'TVD','MW')"
	

then function would be

function processChanges1(elem,suffix1,suffix2) {
	var val1 = document.getElementByID(elem.id).value; var
	val2 = document.getElementByID(elim.id.replace(suffix1,suffix2).value;
	

Edited by dsonesuk
Link to comment
Share on other sites

Ok, i had looked at another approach.. may be even more complex.. but seriously.. i have no idea what i am doing wrong.  the best thing to help me is to show me what the full code should look like.  I am a super beginner...

Just looking at 1 calculation:

<!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>



<table style="width:100%">
  <tr>
	<th></th>
	<th>Interval 1</th> 
  <tr>
    <td>Ending Depth (TVD)</td>
	<th><input type="number" id="Interval-1-EndTVD" name="Interval-1-EndTVD" min="0"></th>

  </tr>
  <tr>
   <td>Interval End Mud Weight (lb/gal)</td>
	<th><input type="number" id="Interval-1-EndMW" name="Interval-1-EndMW" min="0" step="0.01"></th>
  </tr>
  <tr>
    <td>Interval TD Hydrostatic Pressure (psi)</td>
    	<th id="Interval-1-Hydrostatic></th>

	  </tr>

</table>
<p></p>

<script>
  var a = "Interval-1-EndTVD";
  var b = "Interval-1-EndMW";

  function processChanges1() {
    var val1 = document.getElementByID(a).value;
    var val2 = document.getElementByID(b).value;

    //Substitute actual validation here
    if (val1 > 0 && val2 > 0) {
      var z = val1 * val2 * 0.52;
      document.getElementById("Interval-1-Hydrostatic").innerHTML = z;
    }
  }

  document.getElementById(a).addEventListener("change", processChanges1);
  document.getElementById(b).addEventListener("change", processChanges1);
</script>
</body>
</html>

 

Error.JPG

Link to comment
Share on other sites

Fixed the quote, but it's still not calculating 😰

<!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>



<table style="width:100%">
  <tr>
	<th></th>
	<th>Interval 1</th> 
  <tr>
    <td>Ending Depth (TVD)</td>
	<th><input type="number" id="Interval-1-EndTVD" name="Interval-1-EndTVD" min="0"></th>

  </tr>
  <tr>
   <td>Interval End Mud Weight (lb/gal)</td>
	<th><input type="number" id="Interval-1-EndMW" name="Interval-1-EndMW" min="0" step="0.01"></th>
  </tr>
  <tr>
    <td>Interval TD Hydrostatic Pressure (psi)</td>
    	<th id="Interval-1-Hydrostatic"></th>

	  </tr>

</table>
<p></p>

<script>
  var a = "Interval-1-EndTVD";
  var b = "Interval-1-EndMW";

  function processChanges1() {
    var val1 = document.getElementByID(a).value;
    var val2 = document.getElementByID(b).value;

    //Substitute actual validation here
    if (val1 > 0 && val2 > 0) {
      var z = val1 * val2 * 0.52;
      document.getElementById("Interval-1-Hydrostatic").innerHTML = z;
    }
  }

  document.getElementById(a).addEventListener("change", processChanges1);
  document.getElementById(b).addEventListener("change", processChanges1);
</script>
</body>
</html>

 

error2.JPG

Link to comment
Share on other sites

Keep an eye on your browser's developer tools on the Console tab for Javascript error messages, but you'll get an error that's due to the capital ID when you try to get the values:

var val1 = document.getElementByID(a).value;

Javascript is case-sensitive, this is the correct way:

document.getElementById(a)

Link to comment
Share on other sites

Since there is a kind of pattern to how these are referenced, to stop listing each id value, let JavaScript do it for you and have single function only.

<!DOCTYPE html>
<html>
<head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0">
    <title>Document Title</title>
<style>
.calcTable {
  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>



<table class="calcTable">
  <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 data-pressuretype="Hydrostatic" data-thissuffix="TVD" data-othersuffix="MW">Ending Depth (TVD)</td>
	<th><input type="number" id="Interval-1-EndTVD" name="Interval-1-EndTVD" min="0"></th>
	<th><input type="number" id="Interval-2-EndTVD" name="Interval-2-EndTVD" min="0"></th>
	<th><input type="number" id="Interval-3-EndTVD" name="Interval-3-EndTVD" min="0"></th>
	<th><input type="number" id="Interval-4-EndTVD" name="Interval-4-EndTVD" min="0"></th>
	<th><input type="number" id="Interval-5-EndTVD" name="Interval-5-EndTVD" min="0"></th>
	<th><input type="number" id="Interval-6-EndTVD" name="Interval-6-EndTVD" min="0"></th>
	<th><input type="number" id="Interval-7-EndTVD" name="Interval-7-EndTVD" min="0"></th>
  </tr>
  <tr>
   <td data-pressuretype="Hydrostatic" data-thissuffix="MW" data-othersuffix="TVD">Interval End Mud Weight (lb/gal)</td>
	<th><input type="number" id="Interval-1-EndMW" name="Interval-1-EndMW" min="0" step="0.01"></th>
	<th><input type="number" id="Interval-2-EndMW" name="Interval-2-EndMW" min="0" step="0.01"></th>
	<th><input type="number" id="Interval-3-EndMW" name="Interval-3-EndMW" min="0" step="0.01"></th>
	<th><input type="number" id="Interval-4-EndMW" name="Interval-4-EndMW" min="0" step="0.01"></th>
	<th><input type="number" id="Interval-5-EndMW" name="Interval-5-EndMW" min="0" step="0.01"></th>
	<th><input type="number" id="Interval-6-EndMW" name="Interval-6-EndMW" min="0" step="0.01"></th>
	<th><input type="number" id="Interval-7-EndMW" name="Interval-7-EndMW" min="0" step="0.01"></th>
  </tr>
  <tr>
    <td>Interval TD Hydrostatic Pressure (psi)</td>
    <th id="Interval-1-Hydrostatic"></th>
    <th id="Interval-2-Hydrostatic"></th>
	<th id="Interval-3-Hydrostatic"></th>
	<th id="Interval-4-Hydrostatic"></th>
	<th id="Interval-5-Hydrostatic"></th>
	<th id="Interval-6-Hydrostatic"></th>
	<th id="Interval-7-Hydrostatic"></th>

  </tr>

</table>
    
    <table class="calcTable">
  <tr>
	<th></th>
	<th>Interval 1</th> 
	<th>Interval 2</th>
	<th>Interval 3</th>
  </tr>
  
    <tr>
    <td data-pressuretype="Hydrostatic2" data-thissuffix="TVD2" data-othersuffix="MW2">Ending Depth (TVD)</td>
	<th><input type="number" id="Interval-1-EndTVD2" name="Interval-1-EndTVD2" min="0"></th>
	<th><input type="number" id="Interval-2-EndTVD2" name="Interval-2-EndTVD2" min="0"></th>
	<th><input type="number" id="Interval-3-EndTVD2" name="Interval-3-EndTVD2" min="0"></th>
  </tr>
  <tr>
   <td data-pressuretype="Hydrostatic2" data-thissuffix="MW2" data-othersuffix="TVD2">Interval End Mud Weight (lb/gal)</td>
	<th><input type="number" id="Interval-1-EndMW2" name="Interval-1-EndMW2" min="0" step="0.01"></th>
	<th><input type="number" id="Interval-2-EndMW2" name="Interval-2-EndMW2" min="0" step="0.01"></th>
	<th><input type="number" id="Interval-3-EndMW2" name="Interval-3-EndMW2" min="0" step="0.01"></th>
  </tr>
  <tr>
    <td>Interval TD Hydrostatic Pressure (psi)</td>
    <th id="Interval-1-Hydrostatic2"></th>
    <th id="Interval-2-Hydrostatic2"></th>
	<th id="Interval-3-Hydrostatic2"></th>
  </tr>

</table>
<p></p>

<script>
 
  function processChanges1() {
      var pressureType="";
      //retrieve current row suffix from first td/th cell
      var thissuffix = this.parentNode.parentNode.cells[0].getAttribute("data-thissuffix");
      //retrieve other next row suffix from first td/th cell to calculate with
      var othersuffix = this.parentNode.parentNode.cells[0].getAttribute("data-othersuffix");
    var val1 = document.getElementById(this.id).value;
    
    var val2 = document.getElementById(this.id.replace(thissuffix,othersuffix)).value;
    console.log("val1: "+val1+" val2: "+val2);

//Substitute actual validation here
    var currentIndex = this.getAttribute("data-inputindex");
    //retrieve pressure type from first td/th cell
    var pressureType=this.parentNode.parentNode.cells[0].getAttribute("data-pressuretype");
    
    console.log("pressureType: "+pressureType);
    
    if (val1 > 0 && val2 > 0) {
      var z = val1 * val2 * 0.52;
      document.getElementById("Interval-"+currentIndex+"-"+pressureType).innerHTML = z;
    }
  }
  
  //add index ref to input
  var clactable =  document.querySelectorAll(".calcTable"); 
  for(var tableindex=0;tableindex < clactable.length; tableindex++){
      //add index to inputs on rows between header and footer calculation row, index 1 to total rows -1
      for(var tablerow=1;tablerow < clactable[tableindex].rows.length-1; tablerow++){
           for(var tablecell=0;tablecell < clactable[tableindex].rows[tablerow].cells.length; tablecell++){
      if(clactable[tableindex].rows[tablerow].cells[tablecell].children[0] && clactable[tableindex].rows[tablerow].cells[tablecell].children[0].nodeName.toLowerCase() === "input"){
          clactable[tableindex].rows[tablerow].cells[tablecell].children[0].setAttribute('data-inputindex',tablecell );
      }
        }
      
    }
  }
  
var childInput = document.getElementsByTagName('input');

for(var i =0; i <childInput.length; i++){
    if(childInput[i].id){
     document.getElementById(childInput[i].id).addEventListener("change", processChanges1);
  }
}

</script>
</body>
</html>

Not tested in all browsers

Edited by dsonesuk
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
×
×
  • Create New...