Using Javascript, HTML, JQuery & CSS how can I set a variable depending on a HTML Select OnChange, do calculations and update instantly?

Question

I am building a pool pump calculator. My html onchange works perfectly, but I am having trouble passing which Div is active into my Javascript If Else and updating the outputs for each Else . Note that not all features seem to work on JSFiddle , but they work perfectly on a live page.

Here's what I want it to do: (Please see JSFiddle at the bottom for updated version of the demo!)

Depending on the users selection using a HTML Select onChange , a certain Div is displayed using display:block; . Divs from the other selection options are set to display:none; in CSS so they are then hidden and only the correct Div is displayed for each selection. This is the Pool Shape. A variable needs to be set which I am naming PoolShape and I have attempt to make the results of this a String with the Results of "Rectangle" , "Oval" , "Round" or "Oblong" , again depending on the Select onChange .

I am then wanting to add into my Javascript an If Else so that if PoolShape = "Rectangle" then do some calculations, else if PoolShape = "Oval" then do differenet calculations etc for the Results on Tab 3 ( Calc-Tab-3 ).

And finally, there is a DropDown box on the Results Tab 3 ( Calc-Tab-3 ) which will alter one variable in the calculation by calling the function UpdateComparisonPump(); which again searches for the PoolShape and recalculates this section using the newly selected DropDown option StandardPumpSize .

All other calculations on the tabs work fine, apart from this whole PoolShape If Else scenario.

Any help is appreciated.

Here is the HTML I am using: (Please see JSFiddle at the bottom for updated version of the code!)

<span>
What is the shape of your pool:
<label class="radio-container"><input onchange="change('Rectangle-container');RectangleContainerChange();" type="radio" name="radio" id="RectangleCheck" checked="checked"><span class="radio-checkmark"></span>Rectangle
</label><label class="radio-container"><input onchange="change('Oval-container');OvalContainerChange();" type="radio" name="radio" id="OvalCheck"><span class="radio-checkmark"></span>Oval</label><label class="radio-container"><input onchange="change('Round-container');RoundContainerChange();" type="radio" name="radio" id="RoundCheck"><span class="radio-checkmark"></span>Round</label><label class="radio-container"><input onchange="change('Oblong-container');OblongContainerChange();" type="radio" name="radio" id="OblongCheck"><span class="radio-checkmark"></span>Custom Oblong</label>
</span>

<div id="Rectangle-container">
Length of your pool in feet: <input type="number" class="tabinput" id="Length" min="1">

Width of your pool in feet: <input type="number" class="tabinput" id="Width" min="1">

Depth of your pool in feet: <input type="number" class="tabinput" id="Depth" min="1">
</div>

<div id="Oval-container">
Half the length of your pool in feet: <input type="number" class="tabinput" id="HalfLength" min="1">

Half the width of your pool in feet: <input type="number" class="tabinput" id="HalfWidth" min="1">

Depth of your pool in feet: <input type="number" class="tabinput" id="OvalDepth" min="1">
</div>

<div id="Round-container">
Radius of your pool in feet: <input type="number" class="tabinput" id="RoundRadius" min="1">

Depth of your pool in feet: <input type="number" class="tabinput" id="RoundDepth" min="1">
</div>

<div id="Oblong-container">
Small diameter of your pool in feet: <input type="number" class="tabinput" id="SmallDiameter" min="1">

Large diameter of your pool in feet: <input type="number" class="tabinput" id="LargeDiameter" min="1">

Length of your pool in feet: <input type="number" class="tabinput" id="OblongLength" min="1">
</div>

<input type="button" class="CalcButtons" onclick="document.getElementById('Calc-Tab-1').style.display='none';document.getElementById('Calc-Tab-2').style.display='block';" value="Next">
</div>
<div id="Calc-Tab-2" class="CalcTabs">
<h3 class="CalcHeaders">Energy Consumption</h3>
<span>What are the voltage, ampage and kilowatt per hour of your pump?</span>

Volts: <input type="number" class="tabinput" id="Volts" min="1">

Amps: <input type="number" class="tabinput" id="Amps" min="1">

Cost per kWh: <input type="number" class="tabinput" id="CostPerKwh" min="1">

<span>How many hours do you run your pump for:&nbsp;<span class="slideOutputValueHours" id="myHoursRan">7</span> Hours
<input type="range" class="slideInputValueHours slider" id="slideRangeHours" value="7" min="1" max="24" step="1" oninput="myHoursPumpIsRunFunction()">

<input type="button" class="CalcButtons" onclick="document.getElementById('Calc-Tab-2').style.display='none';document.getElementById('Calc-Tab-1').style.display='block';" value="Previous">
<input type="button" class="CalcButtons" onclick="GetTheResults();" value="Calculate Results">
</div>
<div id="Calc-Tab-3" class="CalcTabs">
<h3 class="CalcHeaders">Results & Savings</h3>
<strong>Your pools total expenditures</strong>

Total kWh per day: <span id="ResultsKwhPerDay"></span> KWh per day
Total Cost per day: <span id="ResultsCostPerDay"></span> Thai Baht
Total Cost per month: <span id="ResultsCostPerMonth"></span> Thai Baht based on 30 days
Total Cost per year: <span id="ResultsCostPerYear"></span> Thai Baht per year

<strong>The amount of liters in your pool</strong>

Total liters in your pool: <span id="ResultsTotalLiters"></span> Liters

<strong>The run-time of your pool</strong>

Liters per hour: <span id="ResultsLitersPerHour"></span> Per hour
Time to complete 1 turnover: <span id="ResultsTurnoverTime"></span> Hour
Total turnovers per 24 hour: <span id="ResultsTotalTurnovers"></span> Turnovers

<strong>And here are your savings compared to a <select id="StandardPumpSize" onchange="UpdateComparisonPump()"><option value="1.26">.75hp standard pump</option><option value="1.72">1hp standard pump</option><option value="2.14">1.5hp standard pump</option><option selected value="2.25">2hp standard pump</option><option value="2.62">2.5hp standard pump</option><option value="3.17">3hp standard pump</option><option value="3.5">3.5hp standard pump</option><option value="4">4hp standard pump</option><option value="4.5">4.5hp standard pump</option><option value="5">5hp standard pump</option><option value="5.5">5.5hp standard pump</option><option value="1">variable speed pump</option></select></strong>

Savings per day: <span id="ResultsSavingsPerDay"></span> Thai Baht
Savings per month: <span id="ResultsSavingsPerMonth"></span> Thai Baht
Savings per year: <span id="ResultsSavingsPerYear"></span> Thai Baht
Percentage saved per year: <span id="ResultsSavingsPercentage"></span>% Saved!
</div>

Here are my Javascript and variables being used throughout: (Please see JSFiddle at the bottom for updated version of the code!)

<script>
function GetTheResults() {
var PoolShape = "Rectangle";
var Volts = parseInt(document.getElementById('Volts').value);
var Amps = parseInt(document.getElementById('Amps').value);
var HoursPumpIsRan = parseInt(document.getElementById('slideRangeHours').value);
var KwhPerDay = (Volts * Amps) / 1000 * HoursPumpIsRan;
var CostPerKwh = parseInt( document.getElementById('CostPerKwh').value);
var CostPerDay = KwhPerDay * CostPerKwh;
var CostPerMonth = CostPerDay * 30;
var CostPerYear = CostPerDay * 365;
var Length = parseInt(document.getElementById('Length').value);
var Width = parseInt(document.getElementById('Width').value);
var Depth = parseInt(document.getElementById('Depth').value);
var RectangleTotalLiters = Length * Width * Depth * 7.48;
var HalfLength = parseInt(document.getElementById('HalfLength').value);
var HalfWidth = parseInt(document.getElementById('HalfWidth').value);
var OvalDepth = parseInt(document.getElementById('OvalDepth').value);
var OvalTotalLiters = HalfLength * HalfWidth * 3.14 * 7.48;
var RoundRadius = parseInt(document.getElementById('RoundRadius').value);
var RoundDepth = parseInt(document.getElementById('RoundDepth').value);
var RoundTotalLiters = RoundRadius * RoundRadius * RoundDepth * 7.48;
var SmallDiameter = parseInt(document.getElementById('SmallDiameter').value);
var LargeDiameter = parseInt(document.getElementById('LargeDiameter').value);
var OblongLength = parseInt(document.getElementById('OblongLength').value);
var OblongTotalLiters = SmallDiameter * LargeDiameter * OblongLength * 3.142 * 7.48; 
var FlowRate = parseInt(document.getElementById('FlowRate').value);
var LitersPerHour = FlowRate * 60;
var RectangleTurnoverTime = RectangleTotalLiters / LitersPerHour;
var OvalTurnoverTime = OvalTotalLiters / LitersPerHour;
var RoundTurnoverTime = RoundTotalLiters / LitersPerHour;
var OblongTurnoverTime = OblongTotalLiters / LitersPerHour;
var RectangleTotalTurnovers = 24 / RectangleTurnoverTime;
var OvalTotalTurnovers = 24 / OvalTurnoverTime;
var RoundTotalTurnovers = 24 / RoundTurnoverTime;
var OblongTotalTurnovers = 24 / OblongTurnoverTime;
var StandardPumpSize = parseInt(document.getElementById('StandardPumpSize').value);
var StandardCostPerYear = StandardPumpSize * myHoursRan * CostPerkWh * 365;
var SavingsPerYear = StandardCostPerYear - CostPerYear;
var SavingsPerMonth = SavingsPerYear / 12;
var SavingsPerDay = SavingsPerYear / 365;
var SavingsPercentage = SavingsPerYear / StandardCostPerYear * 100;
/* IF ELSE to define which radio button is selected, and if x is selected then provide the correct output */
if (PoolShape == "Rectangle") {
document.getElementById("ResultsTotalLiters").innerHTML = RectangleTotalLiters;
document.getElementById("ResultsTurnoverTime").innerHTML = RectangleTurnoverTime;
document.getElementById("ResultsTotalTurnovers").innerHTML = RectangleTotalTurnovers;
}
Else if (PoolShape == "Oval") {
document.getElementById("ResultsTotalLiters").innerHTML = OvalTotalLiters;
document.getElementById("ResultsTurnoverTime").innerHTML = OvalTurnoverTime;
document.getElementById("ResultsTotalTurnovers").innerHTML = OvalTotalTurnovers;
}
Else if (PoolShape == "Round") {
document.getElementById("ResultsTotalLiters").innerHTML = RoundTotalLiters;
document.getElementById("ResultsTurnoverTime").innerHTML = RoundTurnoverTime;
document.getElementById("ResultsTotalTurnovers").innerHTML = RoundTotalTurnovers;
}
Else if (PoolShape == "Oblong") {
document.getElementById("ResultsTotalLiters").innerHTML = OblongTotalLiters;
document.getElementById("ResultsTurnoverTime").innerHTML = OblongTurnoverTime;
document.getElementById("ResultsTotalTurnovers").innerHTML = OblongTotalTurnovers;
}
document.getElementById("ResultsLitersPerHour").innerHTML = LitersPerHour;
document.getElementById("ResultsSavingsPerDay").innerHTML = SavingsPerDay;
document.getElementById("ResultsSavingsPerMonth").innerHTML = SavingsPerMonth;
document.getElementById("ResultsSavingsPerYear").innerHTML = SavingsPerYear;
document.getElementById("ResultsSavingsPercentage").innerHTML = SavingsPercentage;
}
</script>

<script>
/* This sets the PoolShape string from our radio button selections */
Function RectangleContainerChange() {
PoolShape == "Rectangle";
}
Function OvalContainerChange() {
PoolShape == "Oval";
}
Function RoundContainerChange() {
PoolShape == "Round";
}
Function OblongContainerChange() {
PoolShape == "Oblong";
}
</script>

<script>
/* This updates the Comparison with the Select Onchange from the Dropdown which should be a live comparison in addition to the initial comparison in GetTheResults() */
Function UpdateComparisonPump() {
if (PoolShape == "Rectangle") {
document.getElementById("ResultsTotalLiters").innerHTML = RectangleTotalLiters;
document.getElementById("ResultsTurnoverTime").innerHTML = RectangleTurnoverTime;
document.getElementById("ResultsTotalTurnovers").innerHTML = RectangleTotalTurnovers;
}
Else if (PoolShape == "Oval") {
document.getElementById("ResultsTotalLiters").innerHTML = OvalTotalLiters;
document.getElementById("ResultsTurnoverTime").innerHTML = OvalTurnoverTime;
document.getElementById("ResultsTotalTurnovers").innerHTML = OvalTotalTurnovers;
}
Else if (PoolShape == "Round") {
document.getElementById("ResultsTotalLiters").innerHTML = RoundTotalLiters;
document.getElementById("ResultsTurnoverTime").innerHTML = RoundTurnoverTime;
document.getElementById("ResultsTotalTurnovers").innerHTML = RoundTotalTurnovers;
}
Else if (PoolShape == "Oblong") {
document.getElementById("ResultsTotalLiters").innerHTML = OblongTotalLiters;
document.getElementById("ResultsTurnoverTime").innerHTML = OblongTurnoverTime;
document.getElementById("ResultsTotalTurnovers").innerHTML = OblongTotalTurnovers;
}
document.getElementById("ResultsSavingsPerDay").innerHTML = SavingsPerDay;
document.getElementById("ResultsSavingsPerMonth").innerHTML = SavingsPerMonth;
document.getElementById("ResultsSavingsPerYear").innerHTML = SavingsPerYear;
document.getElementById("ResultsSavingsPercentage").innerHTML = SavingsPercentage;
}
</script>

And here is some CSS to help display everything: (Please see JSFiddle at the bottom for updated version of the code!)

/*--------------------------------------------------------------
Only displays the first Tab on load
--------------------------------------------------------------*/
.Calc-Tab-1 {
display:block;
}

/*--------------------------------------------------------------
Hide the other tabs on load
--------------------------------------------------------------*/

.Calc-Tab-2,
.Calc-Tab-3 {
display:none;
}

/*--------------------------------------------------------------
Calculator preferences
--------------------------------------------------------------*/

.CalcButtons {
    margin-bottom: 1em!important;
}

.CalcHeaders {
    margin-top: 1em!important;
}

#Calc-Tab-1,
#Calc-Tab-2,
#Calc-Tab-3 {
  padding: 10px;
}

/*--------------------------------------------------------------
Calculator - Hide Pool Shape Divs
--------------------------------------------------------------*/
#Oval-container,
#Round-container,
#Oblong-container {
  display: none;
}

/*--------------------------------------------------------------
Calculator - Tabs display
--------------------------------------------------------------*/
#Calc-Tab-1,
#Calc-Tab-2,
#Calc-Tab-3 {
  display: none;
}

.CalcTabs {
  background: #f9f9f9 !important;
  border-radius: 20px !important;
  padding: 15px !important;
}
/*--------------------------------------------------------------
Calculator form slider
--------------------------------------------------------------*/

.slidecontainer {
    width: 100%;
}

.slider {
    -webkit-appearance: none;
    width: 80%;
    height: 15px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #01ace4;
    cursor: pointer;
}

.slider::-webkit-slider-thumb:hover {
    background: #266ee4;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #01ace4;
    cursor: pointer;
}

.slider::-moz-range-thumb:hover {
    background: #266ee4;

}

/*--------------------------------------------------------------
Calculator replace default radio button
--------------------------------------------------------------*/

/* Hide the browser's default radio button */
.radio-container {
    display: inline-block;
    position: relative;
    padding-left: 40px;
    padding-right: 40px;
    margin-top: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.radio-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/*--------------------------------------------------------------
Colors the radio buttons
--------------------------------------------------------------*/

/* Create a custom radio button */
.radio-checkmark {
    position: absolute;
    top: 0;
    left: 10px;
      margin-right: 10px;
    height: 25px;
    width: 25px;
    background-color: #d3d3d3;
    opacity: 0.7;
    border-radius: 50%;
}

/*On mouse-over, add a grey background color */
.radio-container:hover input ~ .radio-checkmark {
    background-color: #ccc;
    opacity: 1;
}

/*When the radio button is checked, add a blue background */
.radio-container input:checked ~ .radio-checkmark {
    background-color: #01ace4;
}

/*When the radio button is checked and hovered, add a dark blue circle */
.radio-container input:checked~.radio-checkmark:hover {
    background-color: #266ee4 !important;
    opacity: 1;
}

Please click link below to view the calculator on live page:

View calculator on live page

Update as of 20/09/2018 16.48pm (GMT +7)

The code is now too long for this page so I have input this into a JSFiddle and can be viewed here with the Javascript Load type set to Body as advised:

https://jsfiddle.net/Dayley/kfz0w7ud/32/

I could still do with some help on this to clarify why it works great on JSFiddle but not on the live page. I still have not figured this out since 23/07/2018! The code is a simple Copy & Paste from the above link, and with added <script> and </script> before and after the script content. Everything else is exact!

Any helps appreciated!

Answer 1

There have many errors in your code ie some grammatical and some syntacticals. I have corrected some portions of your code. Please check

 function GetTheResults() { var PoolShape = "Rectangle"; var Volts = parseInt(document.getElementById('Volts').value); var Amps = parseInt(document.getElementById('Amps').value); var HoursPumpIsRan = parseInt(document.getElementById('slideRangeHours').value); var KwhPerDay = (Volts * Amps) / 1000 * HoursPumpIsRan; var CostPerKwh = parseInt( document.getElementById('CostPerKwh').value); var CostPerDay = KwhPerDay * CostPerKwh; var CostPerMonth = CostPerDay * 30; var CostPerYear = CostPerDay * 365; var Length = parseInt(document.getElementById('Length').value); var Width = parseInt(document.getElementById('Width').value); var Depth = parseInt(document.getElementById('Depth').value); var RectangleTotalLiters = Length * Width * Depth * 7.48; var HalfLength = parseInt(document.getElementById('HalfLength').value); var HalfWidth = parseInt(document.getElementById('HalfWidth').value); var OvalDepth = parseInt(document.getElementById('OvalDepth').value); var OvalTotalLiters = HalfLength * HalfWidth * 3.14 * 7.48; var RoundRadius = parseInt(document.getElementById('RoundRadius').value); var RoundDepth = parseInt(document.getElementById('RoundDepth').value); var RoundTotalLiters = RoundRadius * RoundRadius * RoundDepth * 7.48; var SmallDiameter = parseInt(document.getElementById('SmallDiameter').value); var LargeDiameter = parseInt(document.getElementById('LargeDiameter').value); var OblongLength = parseInt(document.getElementById('OblongLength').value); var OblongTotalLiters = SmallDiameter * LargeDiameter * OblongLength * 3.142 * 7.48; var FlowRate = parseInt(document.getElementById('FlowRate').value); var LitersPerHour = FlowRate * 60; var RectangleTurnoverTime = RectangleTotalLiters / LitersPerHour; var OvalTurnoverTime = OvalTotalLiters / LitersPerHour; var RoundTurnoverTime = RoundTotalLiters / LitersPerHour; var OblongTurnoverTime = OblongTotalLiters / LitersPerHour; var RectangleTotalTurnovers = 24 / RectangleTurnoverTime; var OvalTotalTurnovers = 24 / OvalTurnoverTime; var RoundTotalTurnovers = 24 / RoundTurnoverTime; var OblongTotalTurnovers = 24 / OblongTurnoverTime; var StandardPumpSize = parseInt(document.getElementById('StandardPumpSize').value); var StandardCostPerYear = StandardPumpSize * myHoursRan * CostPerkWh * 365; var SavingsPerYear = StandardCostPerYear - CostPerYear; var SavingsPerMonth = SavingsPerYear / 12; var SavingsPerDay = SavingsPerYear / 365; var SavingsPercentage = SavingsPerYear / StandardCostPerYear * 100; /* IF ELSE to define which radio button is selected, and if x is selected then provide the correct output */ console.log(PoolShape); if (PoolShape == "Rectangle") { document.getElementById("ResultsTotalLiters").innerHTML = RectangleTotalLiters; document.getElementById("ResultsTurnoverTime").innerHTML = RectangleTurnoverTime; document.getElementById("ResultsTotalTurnovers").innerHTML = RectangleTotalTurnovers; } else if (PoolShape == "Oval") { document.getElementById("ResultsTotalLiters").innerHTML = OvalTotalLiters; document.getElementById("ResultsTurnoverTime").innerHTML = OvalTurnoverTime; document.getElementById("ResultsTotalTurnovers").innerHTML = OvalTotalTurnovers; } else if (PoolShape == "Round") { document.getElementById("ResultsTotalLiters").innerHTML = RoundTotalLiters; document.getElementById("ResultsTurnoverTime").innerHTML = RoundTurnoverTime; document.getElementById("ResultsTotalTurnovers").innerHTML = RoundTotalTurnovers; } else if (PoolShape == "Oblong") { document.getElementById("ResultsTotalLiters").innerHTML = OblongTotalLiters; document.getElementById("ResultsTurnoverTime").innerHTML = OblongTurnoverTime; document.getElementById("ResultsTotalTurnovers").innerHTML = OblongTotalTurnovers; } document.getElementById("ResultsLitersPerHour").innerHTML = LitersPerHour; document.getElementById("ResultsSavingsPerDay").innerHTML = SavingsPerDay; document.getElementById("ResultsSavingsPerMonth").innerHTML = SavingsPerMonth; document.getElementById("ResultsSavingsPerYear").innerHTML = SavingsPerYear; document.getElementById("ResultsSavingsPercentage").innerHTML = SavingsPercentage; } /* This sets the PoolShape string from our radio button selections */ function ContainerChange(shape) { PoolShape = shape; if (PoolShape == "Rectangle") { document.getElementById('Rectangle-container').style.display='block'; document.getElementById('Oval-container').style.display='none'; document.getElementById('Round-container').style.display='none'; document.getElementById('Oblong-container').style.display='none'; } else if (PoolShape == "Oval") { document.getElementById('Rectangle-container').style.display='none'; document.getElementById('Oval-container').style.display='block'; document.getElementById('Round-container').style.display='none'; document.getElementById('Oblong-container').style.display='none'; } else if (PoolShape == "Round") { document.getElementById('Rectangle-container').style.display='none'; document.getElementById('Oval-container').style.display='none'; document.getElementById('Round-container').style.display='block'; document.getElementById('Oblong-container').style.display='none'; } else if (PoolShape == "Oblong") { document.getElementById('Rectangle-container').style.display='none'; document.getElementById('Oval-container').style.display='none'; document.getElementById('Round-container').style.display='none'; document.getElementById('Oblong-container').style.display='block'; } } /* This updates the Comparison with the Select Onchange from the Dropdown which should be a live comparison in addition to the initial comparison in GetTheResults() */ function UpdateComparisonPump() { if (PoolShape == "Rectangle") { document.getElementById("ResultsTotalLiters").innerHTML = RectangleTotalLiters; document.getElementById("ResultsTurnoverTime").innerHTML = RectangleTurnoverTime; document.getElementById("ResultsTotalTurnovers").innerHTML = RectangleTotalTurnovers; } else if (PoolShape == "Oval") { document.getElementById("ResultsTotalLiters").innerHTML = OvalTotalLiters; document.getElementById("ResultsTurnoverTime").innerHTML = OvalTurnoverTime; document.getElementById("ResultsTotalTurnovers").innerHTML = OvalTotalTurnovers; } else if (PoolShape == "Round") { document.getElementById("ResultsTotalLiters").innerHTML = RoundTotalLiters; document.getElementById("ResultsTurnoverTime").innerHTML = RoundTurnoverTime; document.getElementById("ResultsTotalTurnovers").innerHTML = RoundTotalTurnovers; } else if (PoolShape == "Oblong") { document.getElementById("ResultsTotalLiters").innerHTML = OblongTotalLiters; document.getElementById("ResultsTurnoverTime").innerHTML = OblongTurnoverTime; document.getElementById("ResultsTotalTurnovers").innerHTML = OblongTotalTurnovers; } document.getElementById("ResultsSavingsPerDay").innerHTML = SavingsPerDay; document.getElementById("ResultsSavingsPerMonth").innerHTML = SavingsPerMonth; document.getElementById("ResultsSavingsPerYear").innerHTML = SavingsPerYear; document.getElementById("ResultsSavingsPercentage").innerHTML = SavingsPercentage; } 

 /*-------------------------------------------------------------- Only displays the first Tab on load --------------------------------------------------------------*/ .Calc-Tab-1 { display:block; } /*-------------------------------------------------------------- Hide the other tabs on load --------------------------------------------------------------*/ .Calc-Tab-2, .Calc-Tab-3 { display:none; } /*-------------------------------------------------------------- Calculator preferences --------------------------------------------------------------*/ .CalcButtons { margin-bottom: 1em!important; } .CalcHeaders { margin-top: 1em!important; } #Calc-Tab-1, #Calc-Tab-2, #Calc-Tab-3 { padding: 10px; } /*-------------------------------------------------------------- Calculator - Hide Pool Shape Divs --------------------------------------------------------------*/ #Rectangle-container, #Oval-container, #Round-container, #Oblong-container { display: none; } /*-------------------------------------------------------------- Calculator - Tabs display --------------------------------------------------------------*/ #Calc-Tab-1, #Calc-Tab-2, #Calc-Tab-3 { display: none; } .CalcTabs { background: #f9f9f9 !important; border-radius: 20px !important; padding: 15px !important; } /*-------------------------------------------------------------- Calculator form slider --------------------------------------------------------------*/ .slidecontainer { width: 100%; } .slider { -webkit-appearance: none; width: 80%; height: 15px; border-radius: 5px; background: #d3d3d3; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; } .slider:hover { opacity: 1; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; border-radius: 50%; background: #01ace4; cursor: pointer; } .slider::-webkit-slider-thumb:hover { background: #266ee4; } .slider::-moz-range-thumb { width: 25px; height: 25px; border-radius: 50%; background: #01ace4; cursor: pointer; } .slider::-moz-range-thumb:hover { background: #266ee4; } /*-------------------------------------------------------------- Calculator replace default radio button --------------------------------------------------------------*/ /* Hide the browser's default radio button */ .radio-container { display: inline-block; position: relative; padding-left: 40px; padding-right: 40px; margin-top: 12px; margin-bottom: 12px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .radio-container input { position: absolute; opacity: 0; cursor: pointer; } /*-------------------------------------------------------------- Colors the radio buttons --------------------------------------------------------------*/ /* Create a custom radio button */ .radio-checkmark { position: absolute; top: 0; left: 10px; margin-right: 10px; height: 25px; width: 25px; background-color: #d3d3d3; opacity: 0.7; border-radius: 50%; } /*On mouse-over, add a grey background color */ .radio-container:hover input ~ .radio-checkmark { background-color: #ccc; opacity: 1; } /*When the radio button is checked, add a blue background */ .radio-container input:checked ~ .radio-checkmark { background-color: #01ace4; } /*When the radio button is checked and hovered, add a dark blue circle */ .radio-container input:checked~.radio-checkmark:hover { background-color: #266ee4 !important; opacity: 1; } 

 <div id="Calc-Tab-1" class="CalcTabs" style="display:block;"> <span> What is the shape of your pool: <label class="radio-container"> <input onchange="ContainerChange('Rectangle');" type="radio" name="radio" id="RectangleCheck" checked="checked"> <span class="radio-checkmark"></span>Rectangle </label> <label class="radio-container"> <input onchange="ContainerChange('Oval');" type="radio" name="radio" id="OvalCheck"> <span class="radio-checkmark"></span>Oval</label> <label class="radio-container"> <input onchange="ContainerChange('Round');" type="radio" name="radio" id="RoundCheck"> <span class="radio-checkmark"></span>Round</label> <label class="radio-container"> <input onchange="ContainerChange('Oblong');" type="radio" name="radio" id="OblongCheck"> <span class="radio-checkmark"></span>Custom Oblong</label> </span> <div id="Rectangle-container" style="display:block;"> Length of your pool in feet: <input type="number" class="tabinput" id="Length" min="1"> Width of your pool in feet: <input type="number" class="tabinput" id="Width" min="1"> Depth of your pool in feet: <input type="number" class="tabinput" id="Depth" min="1"> </div> <div id="Oval-container"> Half the length of your pool in feet: <input type="number" class="tabinput" id="HalfLength" min="1"> Half the width of your pool in feet: <input type="number" class="tabinput" id="HalfWidth" min="1"> Depth of your pool in feet: <input type="number" class="tabinput" id="OvalDepth" min="1"> </div> <div id="Round-container"> Radius of your pool in feet: <input type="number" class="tabinput" id="RoundRadius" min="1"> Depth of your pool in feet: <input type="number" class="tabinput" id="RoundDepth" min="1"> </div> <div id="Oblong-container"> Small diameter of your pool in feet: <input type="number" class="tabinput" id="SmallDiameter" min="1"> Large diameter of your pool in feet: <input type="number" class="tabinput" id="LargeDiameter" min="1"> Length of your pool in feet: <input type="number" class="tabinput" id="OblongLength" min="1"> </div> <input type="button" class="CalcButtons" onclick="document.getElementById('Calc-Tab-1').style.display='none';document.getElementById('Calc-Tab-2').style.display='block';" value="Next"> </div> <div id="Calc-Tab-2" class="CalcTabs"> <h3 class="CalcHeaders">Energy Consumption</h3> <span>What are the voltage, ampage and kilowatt per hour of your pump?</span> Volts: <input type="number" class="tabinput" id="Volts" min="1"> Amps: <input type="number" class="tabinput" id="Amps" min="1"> Cost per kWh: <input type="number" class="tabinput" id="CostPerKwh" min="1"> <span>How many hours do you run your pump for:&nbsp;<span class="slideOutputValueHours" id="myHoursRan">7</span> Hours <input type="range" class="slideInputValueHours slider" id="slideRangeHours" value="7" min="1" max="24" step="1" oninput="myHoursPumpIsRunFunction()"> <input type="button" class="CalcButtons" onclick="document.getElementById('Calc-Tab-2').style.display='none';document.getElementById('Calc-Tab-1').style.display='block';" value="Previous"> <input type="button" class="CalcButtons" onclick="GetTheResults();" value="Calculate Results"> </div> <div id="Calc-Tab-3" class="CalcTabs"> <h3 class="CalcHeaders">Results & Savings</h3> <strong>Your pools total expenditures</strong> Total kWh per day: <span id="ResultsKwhPerDay"></span> KWh per day Total Cost per day: <span id="ResultsCostPerDay"></span> Thai Baht Total Cost per month: <span id="ResultsCostPerMonth"></span> Thai Baht based on 30 days Total Cost per year: <span id="ResultsCostPerYear"></span> Thai Baht per year <strong>The amount of liters in your pool</strong> Total liters in your pool: <span id="ResultsTotalLiters"></span> Liters <strong>The run-time of your pool</strong> Liters per hour: <span id="ResultsLitersPerHour"></span> Per hour Time to complete 1 turnover: <span id="ResultsTurnoverTime"></span> Hour Total turnovers per 24 hour: <span id="ResultsTotalTurnovers"></span> Turnovers <strong>And here are your savings compared to a <select id="StandardPumpSize" onchange="UpdateComparisonPump()"> <option value="1.26">.75hp standard pump</option> <option value="1.72">1hp standard pump</option> <option value="2.14">1.5hp standard pump</option> <option selected value="2.25">2hp standard pump</option> <option value="2.62">2.5hp standard pump</option> <option value="3.17">3hp standard pump</option> <option value="3.5">3.5hp standard pump</option> <option value="4">4hp standard pump</option> <option value="4.5">4.5hp standard pump</option> <option value="5">5hp standard pump</option> <option value="5.5">5.5hp standard pump</option> <option value="1">variable speed pump</option> </select> </strong> Savings per day: <span id="ResultsSavingsPerDay"></span> Thai Baht Savings per month: <span id="ResultsSavingsPerMonth"></span> Thai Baht Savings per year: <span id="ResultsSavingsPerYear"></span> Thai Baht Percentage saved per year: <span id="ResultsSavingsPercentage"></span>% Saved! </div> 

Answer 2

Check it

 function myTotalLitersFunction() { var ThisIsMyLiters = document.getElementById("slideRange").value; document.getElementById("myLitersInPool").innerHTML = ThisIsMyLiters; } function change(name) { document.getElementById('Rectangle-container').style.display = 'none'; document.getElementById('Oval-container').style.display = 'none'; document.getElementById('Round-container').style.display = 'none'; document.getElementById('Oblong-container').style.display = 'none'; document.getElementById(name).style.display='block'; } function myHoursPumpIsRunFunction() { var ThisIsMyHoursRun = document.getElementById("slideRangeHours").value; document.getElementById("myHoursRan").innerHTML = ThisIsMyHoursRun; } function GetTheResults() { var PoolShape = "Rectangle"; var Volts = parseInt(document.getElementById('Volts').value); var Amps = parseInt(document.getElementById('Amps').value); var HoursPumpIsRan = parseInt(document.getElementById('slideRangeHours').value); var KwhPerDay = (Volts * Amps) / 1000 * HoursPumpIsRan; var CostPerKwh = parseInt(document.getElementById('CostPerKwh').value); console.log(CostPerKwh); var CostPerDay = KwhPerDay * CostPerKwh; var CostPerMonth = CostPerDay * 30; var CostPerYear = CostPerDay * 365; var Length = parseInt(document.getElementById('Length').value); var Width = parseInt(document.getElementById('Width').value); var Depth = parseInt(document.getElementById('Depth').value); var RectangleTotalLiters = Length * Width * Depth * 7.48; var HalfLength = parseInt(document.getElementById('HalfLength').value); var HalfWidth = parseInt(document.getElementById('HalfWidth').value); var OvalDepth = parseInt(document.getElementById('OvalDepth').value); var OvalTotalLiters = HalfLength * HalfWidth * 3.14 * 7.48; var RoundRadius = parseInt(document.getElementById('RoundRadius').value); var RoundDepth = parseInt(document.getElementById('RoundDepth').value); var RoundTotalLiters = RoundRadius * RoundRadius * RoundDepth * 7.48; var SmallDiameter = parseInt(document.getElementById('SmallDiameter').value); var LargeDiameter = parseInt(document.getElementById('LargeDiameter').value); var OblongLength = parseInt(document.getElementById('OblongLength').value); var OblongTotalLiters = SmallDiameter * LargeDiameter * OblongLength * 3.142 * 7.48; var FlowRate = parseInt(document.getElementById('FlowRate').value); var LitersPerHour = FlowRate * 60; var RectangleTurnoverTime = RectangleTotalLiters / LitersPerHour; var OvalTurnoverTime = OvalTotalLiters / LitersPerHour; var RoundTurnoverTime = RoundTotalLiters / LitersPerHour; var OblongTurnoverTime = OblongTotalLiters / LitersPerHour; var RectangleTotalTurnovers = 24 / RectangleTurnoverTime; var OvalTotalTurnovers = 24 / OvalTurnoverTime; var RoundTotalTurnovers = 24 / RoundTurnoverTime; var OblongTotalTurnovers = 24 / OblongTurnoverTime; var StandardPumpSize = parseInt(document.getElementById('StandardPumpSize').value); var StandardCostPerYear = StandardPumpSize * myHoursRan * CostPerKwh * 365; var SavingsPerYear = StandardCostPerYear - CostPerYear; var SavingsPerMonth = SavingsPerYear / 12; var SavingsPerDay = SavingsPerYear / 365; var SavingsPercentage = SavingsPerYear / StandardCostPerYear * 100; if (PoolShape == "Rectangle") { document.getElementById("ResultsTotalLiters").innerHTML = RectangleTotalLiters; document.getElementById("ResultsTurnoverTime").innerHTML = RectangleTurnoverTime; document.getElementById("ResultsTotalTurnovers").innerHTML = RectangleTotalTurnovers; } else if (PoolShape == "Oval") { document.getElementById("ResultsTotalLiters").innerHTML = OvalTotalLiters; document.getElementById("ResultsTurnoverTime").innerHTML = OvalTurnoverTime; document.getElementById("ResultsTotalTurnovers").innerHTML = OvalTotalTurnovers; } else if (PoolShape == "Round") { document.getElementById("ResultsTotalLiters").innerHTML = RoundTotalLiters; document.getElementById("ResultsTurnoverTime").innerHTML = RoundTurnoverTime; document.getElementById("ResultsTotalTurnovers").innerHTML = RoundTotalTurnovers; } else if (PoolShape == "Oblong") { document.getElementById("ResultsTotalLiters").innerHTML = OblongTotalLiters; document.getElementById("ResultsTurnoverTime").innerHTML = OblongTurnoverTime; document.getElementById("ResultsTotalTurnovers").innerHTML = OblongTotalTurnovers; } document.getElementById("ResultsKwhPerDay").innerHTML = KwhPerDay; document.getElementById("ResultsCostPerDay").innerHTML = CostPerDay; document.getElementById("ResultsCostPerMonth").innerHTML = CostPerMonth; document.getElementById("ResultsCostPerYear").innerHTML = CostPerYear; document.getElementById("ResultsLitersPerHour").innerHTML = LitersPerHour; document.getElementById("ResultsSavingsPerDay").innerHTML = SavingsPerDay; document.getElementById("ResultsSavingsPerMonth").innerHTML = SavingsPerMonth; document.getElementById("ResultsSavingsPerYear").innerHTML = SavingsPerYear; document.getElementById("ResultsSavingsPercentage").innerHTML = SavingsPercentage; } function printDiv() { var printContents = document.getElementById(Calc-Tab-3).innerHTML; var originalContents = document.body.innerHTML; document.body.innerHTML = printContents; window.print(); document.body.innerHTML = originalContents; } function RectangleContainerChange() { PoolShape = "Rectangle"; } function OvalContainerChange() { PoolShape = "Oval"; } function RoundContainerChange() { PoolShape = "Round"; } function OblongContainerChange() { PoolShape = "Oblong"; } function UpdateComparisonPump() { if (PoolShape == "Rectangle") { document.getElementById("ResultsTotalLiters").innerHTML = RectangleTotalLiters; document.getElementById("ResultsTurnoverTime").innerHTML = RectangleTurnoverTime; document.getElementById("ResultsTotalTurnovers").innerHTML = RectangleTotalTurnovers; } else if (PoolShape == "Oval") { document.getElementById("ResultsTotalLiters").innerHTML = OvalTotalLiters; document.getElementById("ResultsTurnoverTime").innerHTML = OvalTurnoverTime; document.getElementById("ResultsTotalTurnovers").innerHTML = OvalTotalTurnovers; } else if (PoolShape == "Round") { document.getElementById("ResultsTotalLiters").innerHTML = RoundTotalLiters; document.getElementById("ResultsTurnoverTime").innerHTML = RoundTurnoverTime; document.getElementById("ResultsTotalTurnovers").innerHTML = RoundTotalTurnovers; } else if (PoolShape == "Oblong") { document.getElementById("ResultsTotalLiters").innerHTML = OblongTotalLiters; document.getElementById("ResultsTurnoverTime").innerHTML = OblongTurnoverTime; document.getElementById("ResultsTotalTurnovers").innerHTML = OblongTotalTurnovers; } document.getElementById("ResultsSavingsPerDay").innerHTML = SavingsPerDay; document.getElementById("ResultsSavingsPerMonth").innerHTML = SavingsPerMonth; document.getElementById("ResultsSavingsPerYear").innerHTML = SavingsPerYear; document.getElementById("ResultsSavingsPercentage").innerHTML = SavingsPercentage; } function ResetTheCalc() { document.getElementById('Calc-Tab-3').style.display='none'; document.getElementById('Calc-Tab-1').style.display='block'; document.getElementById("slideOutputValue").innerHTML = "10000"; document.getElementById("slideInputValue").innerHTML = "10000"; document.getElementById("FlowRate").innerHTML = ""; document.getElementById('RectangleCheck').checked = true; document.getElementById('OvalCheck').checked = false; document.getElementById('RoundCheck').checked = false; document.getElementById('OblongCheck').checked = false; document.getElementById("myHoursRan").innerHTML = "7"; document.getElementById("SlideRangeHours").innerHTML = "7"; document.querySelector(".tabinput").innerHTML = ""; } 

 /*-------------------------------------------------------------- Only displays the first Tab on load --------------------------------------------------------------*/ .Calc-Tab-1 { display:block; } /*-------------------------------------------------------------- Hide the other tabs on load --------------------------------------------------------------*/ .Calc-Tab-2, .Calc-Tab-3 { display:none; } /*-------------------------------------------------------------- Calculator preferences --------------------------------------------------------------*/ .CalcButtons { margin-bottom: 1em!important; } .CalcHeaders { margin-top: 1em!important; } #Calc-Tab-1, #Calc-Tab-2, #Calc-Tab-3 { padding: 10px; } /*-------------------------------------------------------------- Calculator - Hide Pool Shape Divs --------------------------------------------------------------*/ #Oval-container, #Round-container, #Oblong-container { display: none; } /*-------------------------------------------------------------- Calculator - Tabs display --------------------------------------------------------------*/ #Calc-Tab-1, #Calc-Tab-2, #Calc-Tab-3 { display: none; } .CalcTabs { background: #f9f9f9 !important; border-radius: 20px !important; padding: 15px !important; } /*-------------------------------------------------------------- Calculator form slider --------------------------------------------------------------*/ .slidecontainer { width: 100%; } .slider { -webkit-appearance: none; width: 80%; height: 15px; border-radius: 5px; background: #d3d3d3; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; } .slider:hover { opacity: 1; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; border-radius: 50%; background: #01ace4; cursor: pointer; } .slider::-webkit-slider-thumb:hover { background: #266ee4; } .slider::-moz-range-thumb { width: 25px; height: 25px; border-radius: 50%; background: #01ace4; cursor: pointer; } .slider::-moz-range-thumb:hover { background: #266ee4; } /*-------------------------------------------------------------- Calculator replace default radio button --------------------------------------------------------------*/ /* Hide the browser's default radio button */ .radio-container { display: inline-block; position: relative; padding-left: 40px; padding-right: 40px; margin-top: 12px; margin-bottom: 12px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .radio-container input { position: absolute; opacity: 0; cursor: pointer; } /*-------------------------------------------------------------- Colors the radio buttons --------------------------------------------------------------*/ /* Create a custom radio button */ .radio-checkmark { position: absolute; top: 0; left: 10px; margin-right: 10px; height: 25px; width: 25px; background-color: #d3d3d3; opacity: 0.7; border-radius: 50%; } /*On mouse-over, add a grey background color */ .radio-container:hover input ~ .radio-checkmark { background-color: #ccc; opacity: 1; } /*When the radio button is checked, add a blue background */ .radio-container input:checked ~ .radio-checkmark { background-color: #01ace4; } /*When the radio button is checked and hovered, add a dark blue circle */ .radio-container input:checked~.radio-checkmark:hover { background-color: #266ee4 !important; opacity: 1; } 

 <div id="Calc-Tab-1" class="CalcTabs" style="display:block;"> <h3 class="CalcHeaders">Pool Measurements</h3> <p><span><br /> How many liters is your pool volume:&nbsp;<span class="slideOutputValue" id="myLitersInPool">10000</span> liters<br /> <input type="range" class="slideInputValue slider" id="slideRange" value="10000" min="5000" max="300000" step="5000" oninput="myTotalLitersFunction()"> <br /> </span></p> <p>What is the flow rate of your pump? <input type="number" class="tabinput" id="FlowRate" min="1"> </p> <p><span><br /> What is the shape of your pool:<br /> <label class="radio-container"> <input onchange="change('Rectangle-container');RectangleContainerChange();" type="radio" name="radio" id="RectangleCheck" checked="checked"> <span class="radio-checkmark"></span>Rectangle<br /> </label> <label class="radio-container"> <input onchange="change('Oval-container');OvalContainerChange();" type="radio" name="radio" id="OvalCheck"> <span class="radio-checkmark"></span>Oval</label> <label class="radio-container"> <input onchange="change('Round-container');RoundContainerChange();" type="radio" name="radio" id="RoundCheck"> <span class="radio-checkmark"></span>Round</label> <label class="radio-container"> <input onchange="change('Oblong-container');OblongContainerChange();" type="radio" name="radio" id="OblongCheck"> <span class="radio-checkmark"></span>Custom Oblong</label> <br /> </span></p> <div id="Rectangle-container"> Length of your pool in feet: <input type="number" class="tabinput" id="Length" min="1"> </p> <p>Width of your pool in feet: <input type="number" class="tabinput" id="Width" min="1"> </p> <p>Depth of your pool in feet: <input type="number" class="tabinput" id="Depth" min="1"> </div> <div id="Oval-container"> Half the length of your pool in feet: <input type="number" class="tabinput" id="HalfLength" min="1"> </p> <p>Half the width of your pool in feet: <input type="number" class="tabinput" id="HalfWidth" min="1"> </p> <p>Depth of your pool in feet: <input type="number" class="tabinput" id="OvalDepth" min="1"> </div> <div id="Round-container"> Radius of your pool in feet: <input type="number" class="tabinput" id="RoundRadius" min="1"> </p> <p>Depth of your pool in feet: <input type="number" class="tabinput" id="RoundDepth" min="1"> </div> <div id="Oblong-container"> Small diameter of your pool in feet: <input type="number" class="tabinput" id="SmallDiameter" min="1"> </p> <p>Large diameter of your pool in feet: <input type="number" class="tabinput" id="LargeDiameter" min="1"> </p> <p>Length of your pool in feet: <input type="number" class="tabinput" id="OblongLength" min="1"> </div> <p> <input type="button" class="CalcButtons" onclick="document.getElementById('Calc-Tab-1').style.display='none';document.getElementById('Calc-Tab-2').style.display='block';" value="Next"> </div> <div id="Calc-Tab-2" class="CalcTabs"> <h3 class="CalcHeaders">Energy Consumption</h3> <p><span>What are the voltage, ampage and kilowatt per hour of your pump?</span></p> <p>Volts: <input type="number" class="tabinput" id="Volts" min="1"> </p> <p>Amps: <input type="number" class="tabinput" id="Amps" min="1"> </p> <p>Cost per kWh: <input type="number" class="tabinput" id="CostPerKwh" min="1"> </p> <p><span>How many hours do you run your pump for:&nbsp;<span class="slideOutputValueHours" id="myHoursRan">7</span> Hours<br /> <input type="range" class="slideInputValueHours slider" id="slideRangeHours" value="7" min="1" max="24" step="1" oninput="myHoursPumpIsRunFunction()"> </p> <p> <input type="button" class="CalcButtons" onclick="document.getElementById('Calc-Tab-2').style.display='none';document.getElementById('Calc-Tab-1').style.display='block';" value="Previous"> <br /> <input type="button" class="CalcButtons" onclick="GetTheResults();" value="Calculate Results"> </div> <div id="Calc-Tab-3" class="CalcTabs"> <h3 class="CalcHeaders">Results &#038; Savings</h3> <p><strong>Your pools total expenditures</strong></p> <p>Total kWh per day: <span id="ResultsKwhPerDay"></span> KWh per day<br /> Total Cost per day: <span id="ResultsCostPerDay"></span> Thai Baht<br /> Total Cost per month: <span id="ResultsCostPerMonth"></span> Thai Baht based on 30 days<br /> Total Cost per year: <span id="ResultsCostPerYear"></span> Thai Baht per year</p> <p><strong>The amount of liters in your pool</strong></p> <p>Total liters in your pool: <span id="ResultsTotalLiters"></span> Liters</p> <p><strong>The run-time of your pool</strong></p> <p>Liters per hour: <span id="ResultsLitersPerHour"></span> Per hour<br /> Time to complete 1 turnover: <span id="ResultsTurnoverTime"></span> Hour<br /> Total turnovers per 24 hour: <span id="ResultsTotalTurnovers"></span> Turnovers</p> <p><strong>And here are your savings compared to a <select id="StandardPumpSize" onchange="UpdateComparisonPump()"> <option value="1.26">.75hp standard pump</option> <option value="1.72">1hp standard pump</option> <option value="2.14">1.5hp standard pump</option> <option selected value="2.25">2hp standard pump</option> <option value="2.62">2.5hp standard pump</option> <option value="3.17">3hp standard pump</option> <option value="3.5">3.5hp standard pump</option> <option value="4">4hp standard pump</option> <option value="4.5">4.5hp standard pump</option> <option value="5">5hp standard pump</option> <option value="5.5">5.5hp standard pump</option> <option value="1">variable speed pump</option> </select> </strong></p> <p>Savings per day: <span id="ResultsSavingsPerDay"></span> Thai Baht<br /> Savings per month: <span id="ResultsSavingsPerMonth"></span> Thai Baht<br /> Savings per year: <span id="ResultsSavingsPerYear"></span> Thai Baht<br /> Percentage saved per year: <span id="ResultsSavingsPercentage"></span>% Saved!</p> <p> <input type="button" class="CalcButtons" onclick="document.getElementById('Calc-Tab-3').style.display='none';document.getElementById('Calc-Tab-2').style.display='block';" value="Previous"> <br /> <input type="button" class="CalcButtons" onclick="ResetTheCalc();" value="Reset all fields"> <br /> <input type="button" class="CalcButtons" onclick="printDiv();" value="Print Results"> </div> 

Answer 3

It seems your example is incomplete, there were a few things I had to get from your live website to build a working example. These things were:

• In your example there are a few places with Function instead of function , this is correct on your website.
• Likewise there are a few places with Else if instead of else if , this is also correct on your website.
• In the functions RectangleContainerChange , OvalContainerChange , RoundContainerChange and OblongContainerChange the example has PoolShape == "<shape>"; this has to be PoolShape = "<shape>"; , which is correct on your website.
• Functions missing in the example that exist on your website: myHoursPumpIsRunFunction , myTotalLitersFunction and change .

While checking these things on your live website I noticed that there are random </p><p> statements within your javascript that should be corrected:

function myTotalLitersFunction() {
var ThisIsMyLiters = document.getElementById("slideRange").value;
document.getElementById("myLitersInPool").innerHTML = ThisIsMyLiters;
}</p>
<p>function change(name) {
document.getElementById('Rectangle-container').style.display = 'none';
document.getElementById('Oval-container').style.display = 'none';
document.getElementById('Round-container').style.display = 'none';
document.getElementById('Oblong-container').style.display = 'none';
document.getElementById(name).style.display='block';
}</p>

This gives parse errors while loading the javascript and causes functions to not be found, and could be the actual issue you've faced.

To get the example working I've changed the following things:

• Moved var PoolShape = "Rectangle" outside of the function GetTheResults , otherwise setting it in RectangleContainerChange , OvalContainerChange , RoundContainerChange and OblongContainerChange will do nothing.
• Changed the css selectors from .Calc-Tab-1 to #Calc-Tab-1 and .Calc-Tab-2, .Calc-Tab-3 to #Calc-Tab-2, #Calc-Tab-3 and removed the display: none that got added to all tabs.
• As @Piyali stated, in the calculation for StandardCostPerYear , the variable should be CostPerKwh and not CostPerkWh as javascript is case-sensitive.
• In the same calculation you're using myHoursRan , which is a <span> element. The correct number variable is HoursPumpIsRan .
• Add the following statements to the GetTheResults function, as your example is missing them:

document.getElementById('Calc-Tab-2').style.display = 'none'; document.getElementById('Calc-Tab-3').style.display = 'block';

A somewhat working example can be found on http://jsfiddle.net/sh9qudvL/29/