使用 Javascript、HTML、JQuery 和 CSS 如何根据 HTML Select OnChange 设置变量，立即进行计算和更新？

Question

我正在构建一个水泵计算器。我的 html onchange 工作完美，但我无法将哪个 Div 激活到我的 Javascript If Else 并更新每个 Else 的输出。请注意，并非所有功能似乎都适用于 JSFiddle，但它们在实时页面上完美运行。

这是我想要它做的：（请参阅底部的 JSFiddle 以获取演示的更新版本！）

根据使用 HTML Select onChange 的用户选择，使用 display:block; 显示某个 Div。其他选择选项中的 Div 被设置为 CSS 中的 display:none;，因此它们随后被隐藏，每个选择仅显示正确的 Div。这是泳池形状。需要设置一个变量，我将其命名为 PoolShape，我试图将其结果设为字符串，结果为 "Rectangle"、"Oval"、"Round" 或 "Oblong"，再次取决于 Select onChange.

然后我想在我的 Javascript 中添加一个 If Else 以便 if PoolShape = "Rectangle" 然后进行一些计算， else if PoolShape = "Oval" 然后对结果进行差分计算等选项卡 3（Calc-Tab-3）。

最后，结果选项卡 3 (Calc-Tab-3) 上有一个下拉框，它将通过调用函数 [=33] 来改变计算中的一个变量=] 再次搜索 PoolShape 并使用新选择的 DropDown 选项重新计算此部分 StandardPumpSize.

除了整个 PoolShape If Else 场景之外，选项卡上的所有其他计算都工作正常。

感谢任何帮助。

这是我正在使用的 HTML：（请参阅底部的 JSFiddle 以获取代码的更新版本！）

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

这是我的 Javascript 和整个过程中使用的变量：（请参阅底部的 JSFiddle 以获取代码的更新版本！）

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

这里有一些 CSS 可以帮助显示所有内容：（请参阅底部的 JSFiddle 以获取代码的更新版本！）

/*--------------------------------------------------------------
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;
}

请点击下面的link查看实时页面上的计算器：

View calculator on live page

更新于 2018 年 9 月 20 日下午 16 点 48 分（格林威治标准时间 +7）

该页面的代码现在太长了，所以我将其输入到 JSFiddle 中，可以在此处将 Javascript Load type 设置为 Body 查看] 根据建议：

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

我仍然需要一些帮助来阐明为什么它在 JSFiddle 但在实时页面上效果不佳。自 2018 年 7 月 23 日以来，我仍然没有弄明白这一点！代码是对上面link的简单复制和粘贴，并在脚本内容前后添加了<script>和</script>。其他一切都是准确的！

感谢任何帮助！

Answer 1

您的代码中有很多错误，即一些语法错误和句法错误。我已经更正了您的代码的某些部分。请检查

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

检查一下

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

您的示例似乎不完整，我必须从您的实时网站获取一些信息才能构建一个有效的示例。这些东西是：

在您的示例中，有几个地方 Function 而不是 function，这在您的网站上是正确的。
同样有一些地方用 Else if 而不是 else if，这在您的网站上也是正确的。
在函数 RectangleContainerChange、OvalContainerChange、RoundContainerChange 和 OblongContainerChange 示例中有 PoolShape == "<shape>"; 这必须是 PoolShape = "<shape>";，它在您的网站上是正确的。
示例中缺少的函数存在于您的网站上：myHoursPumpIsRunFunction、myTotalLitersFunction 和 change。

在您的实时网站上检查这些内容时，我注意到您的 javascript 中有随机的 </p><p> 语句需要更正：

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>

加载 javascript 时出现解析错误并导致找不到函数，这可能是您遇到的实际问题。

为了使示例正常工作，我更改了以下内容：

将 var PoolShape = "Rectangle" 移到函数 GetTheResults 之外，否则将其设置在 RectangleContainerChange、OvalContainerChange、RoundContainerChange 和 OblongContainerChange 中即可没什么。
将 css 选择器从 .Calc-Tab-1 更改为 #Calc-Tab-1，将 .Calc-Tab-2, .Calc-Tab-3 更改为 #Calc-Tab-2, #Calc-Tab-3，并删除了添加到所有选择器的 display: none选项卡。
正如@Piyali 所述，在 StandardCostPerYear 的计算中，变量应该是 CostPerKwh 而不是 CostPerkWh，因为 javascript 区分大小写。
在您使用 myHoursRan 的同一计算中，这是一个 <span> 元素。正确的数字变量是 HoursPumpIsRan.
将以下语句添加到 GetTheResults 函数，因为您的示例缺少它们：

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

可以在 http://jsfiddle.net/sh9qudvL/29/

上找到一个比较有效的示例

使用 Javascript、HTML、JQuery 和 CSS 如何根据 HTML Select OnChange 设置变量，立即进行计算和更新？

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

html

javascript

jquery

if-statement

onchange