获取JavaScript以将计算结果输出到HTML

Question

嘿，我在获取我的JavaScript以便将计算结果输出到HTML时遇到麻烦...

如果可以的话，请检查我的代码，看看我可能在哪里出错了

  var doorDesign_Prices= new Array(); doorDesign_Prices["None"]=0; doorDesign_Prices["PRP15"]=8.10; doorDesign_Prices["PRP15 Deluxe"]=12.30; doorDesign_Prices["PRP15 R"]=11.05; doorDesign_Prices["PRP25"]=11.30; doorDesign_Prices["PRP2525"]=13.35; doorDesign_Prices["PRP35"]=11.30; doorDesign_Prices["PRP45"]=13.90; doorDesign_Prices["PRP55"]=17.85; doorDesign_Prices["PRP5555"]=26.75; doorDesign_Prices["PRP65"]=11.30; doorDesign_Prices["PRP6565"]=13.60; doorDesign_Prices["PRP85"]=17.75; doorDesign_Prices["PRP95"]=11.30; doorDesign_Prices["PRP9595"]=13.35; doorDesign_Prices["PRP100"]=23.20; doorDesign_Prices["PRP105"]=31.75; doorDesign_Prices["PRP110"]=30.75; doorDesign_Prices["PRP110110"]=35.75; doorDesign_Prices["PRP181"]=21.75; doorDesign_Prices["PRP185"]=21.75; doorDesign_Prices["PRP190"]=10.10; doorDesign_Prices["PRP200M"]=20.75; doorDesign_Prices["PRP201M"]=20.75; doorDesign_Prices["PRP201MT"]=20.75; function getDoorDesign() { var doorDesignSelect = document.getElementById('doorDesign'); return doorDesign_Prices[doorDesignSelect.value]; } var woodType_Prices= new Array(); woodType_Prices["None"]=10.01; woodType_Prices["C. Pine"]=14.60; woodType_Prices["Cherry"]=7.00; woodType_Prices["Hickory"]=5.40; woodType_Prices["K Pine"]=24.00; woodType_Prices["Mahogany"]=12.51; woodType_Prices["Maple"]=7.46; woodType_Prices["Pt. Grade"]=18.16; woodType_Prices["R. Birch"]=9.18; woodType_Prices["Red Oak"]=13.12; woodType_Prices["Sapele"]=7.03; woodType_Prices["W. Ash"]=12.04; woodType_Prices["W. Oak"]=8.05; woodType_Prices["Walnut"]=11.05; function getWoodType() { var woodTypeSelect = document.getElementById('woodType'); return woodType_Prices[woodTypeSelect.value]; } var lipType_Prices= new Array(); lipType_Prices["A"]=0.95; lipType_Prices["B"]=0.95; lipType_Prices["C"]=1.90; lipType_Prices["D"]=0.95; lipType_Prices["E"]=0.95; lipType_Prices["F"]=0.95; lipType_Prices["I"]=0.95; lipType_Prices["L"]=0.95; lipType_Prices["M"]=0.95; lipType_Prices["R"]=0.95; lipType_Prices["S"]=0.95; lipType_Prices["T"]=0.95; lipType_Prices["Z"]=0.95; function getLipType() { var lipTypeSelect = document.getElementById('lipType'); //alert(filling_prices[cakeSelect.value]); return lipType_Prices[lipTypeSelect.value]; } var mouldType_Prices= new Array(); mouldType_Prices["4/4"]=0; mouldType_Prices["5/4"]=0; mouldType_Prices["Deluxe"]=0; mouldType_Prices["M"]=0; mouldType_Prices["P"]=0; mouldType_Prices["S"]=0; mouldType_Prices["T"]=0; mouldType_Prices["A"]=0; mouldType_Prices["V"]=0; mouldType_Prices["228"]=0; mouldType_Prices["MT"]=0; function getMouldType() { var mouldTypeSelect = document.getElementById('mouldType'); return mouldType_Prices[mouldTypeSelect.value]; } var panelType_Prices= new Array(); panelType_Prices["A"]=0; panelType_Prices["B"]=0; panelType_Prices["C"]=0; panelType_Prices["D"]=0; panelType_Prices["E"]=0; panelType_Prices["F"]=0; panelType_Prices["M"]=0; panelType_Prices["O"]=0; panelType_Prices["Q"]=0; panelType_Prices["R"]=0; panelType_Prices["S"]=0; panelType_Prices["T"]=0; panelType_Prices["V"]=0; panelType_Prices["Rev C"]=0; panelType_Prices["Rev F"]=0; panelType_Prices["Bead"]=0; function getPanelType() { var panelTypeSelect = document.getElementById('panelType'); return panelType_Prices[panelTypeSelect.value]; } var gradeAndThickness_Prices= new Array(); gradeAndThickness_Prices["None"]=0; gradeAndThickness_Prices["4/4 Standard"]=13.12; gradeAndThickness_Prices["4/4 Select"]=17.06; gradeAndThickness_Prices["5/4 Standard"]=17.06; gradeAndThickness_Prices["5/4 Select"]=22.17; function getGradeAndThickness() { var gradeAndThicknessSelect = document.getElementById('gradeAndThickness'); return gradeAndThickness_Prices[gradeAndThicknessSelect.value]; } var doorOptions_Prices= new Array(); doorOptions_Prices["None"]=0; doorOptions_Prices["Finger Pulls"]=2.00; doorOptions_Prices["Hinge Holes"]=5.00; doorOptions_Prices["Lip As Pair"]=2.00; function getDoorOptions() { var doorOptionsSelect = document.getElementById('doorOptions'); return doorOptions_Prices[doorOptionsSelect.value]; } function calculateTotal() { var total = getDoorDesign() + getWoodType() + getMouldType() + getPanelType() + getGradeAndThickness + getFinish + getDoorOptions; var totalEl = document.getElementById('totalPrice'); document.getElementById('totalPrice').innerHTML = "Your Total is: $" + total; } function hideTotal() { var totalEl = document.getElementById('totalPrice'); totalEl.style.display = 'none'; } 

 <HEAD> <script src="OrderForm.js"></script> </HEAD> <body onload='hideTotal()'> <div id="wrap"> <form action="" id="orderForm" onsubmit="return false;"> <div> <div class="cont_order"> <fieldset> <table align=center border=0 width=300 cellpadding="1"> <tr> <td> <select id="doorDesign" name='doorDesign' onchange="calculateTotal()"> <option>Door Design</option> <option value="PRP15">PRP15</option> <option value="PRP15 DELUXE">PRP15 DELUXE</option> <option value="PRP 15 R">PRP15 R</option> <option value="PRP25">PRP25</option> <option value="PRP2525">PRP2525</option> <option value="PRP35">PRP35</option> <option value="PRP45">PRP45</option> <option value="PRP55">PRP55</option> <option value="PRP5555">PRP5555</option> <option value="PRP65">PRP65</option> <option value="PRP6565">PRP6565</option> <option value="PRP85">PRP85</option> <option value="PRP95">PRP95</option> <option value="PRP9595">PRP9595</option> <option value="PRP100">PRP100</option> <option value="PRP105">PRP105</option> <option value="PRP110">PRP110</option> <option value="PRP110110">PRP110110</option> <option value="PRP181">PRP181</option> <option value="PRP185">PRP185</option> <option value="PRP190">PRP190</option> <option value="PRP200M">PRP200M</option> <option value="PRP201M">PRP201M</option> <option value="PRP201MT">PRP201MT</option> </select> </td> <td> <select id="woodType" name='woodType' onchange="calculateTotal()"> <option>Wood Type</option> <option value="C. Pine">C. Pine</option> <option value="Cherry">Cherry</option> <option value="Hickory">Hickory</option> <option value="K. Pine">K. Pine</option> <option value="Mahogany">Mahogany</option> <option value="Maple">Maple</option> <option value="Pt. Grade">Pt. Grade</option> <option value="R. Birch">R. Birch</option> <option value="Red Oak">Red Oak</option> <option value="Sapele">Sapele</option> <option value="W. Ash">W. Ash</option> <option value="W. Birch">W. Birch</option> <option value="W. Oak">W. Oak</option> <option value="Walnut">Walnut</option> </select> </td> <td> <select id="lipType" name='lipType' onchange="calculateTotal()"> <option>Lip Type</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> <option value="E">E</option> <option value="F">F</option> <option value="I">I</option> <option value="L">L</option> <option value="M">M</option> <option value="R">R</option> <option value="S">S</option> <option value="T">T</option> <option value="Z">Z</option> </select> </td> <td> <select id="mouldType" name='mouldType' onchange="calculateTotal()"> <option>Mould Type</option> <option value="4/4">4/4</option> <option value="5/4">5/4</option> <option value="Delue">Deluxe</option> <option value="M">M</option> <option value="P">P</option> <option value="S">S</option> <option value="T">T</option> <option value="A">A</option> <option value="V">V</option> <option value="228">228</option> <option value="MT">MT</option> </select> </td> <td> <select id="panelType" name='panelType' onchange="calculateTotal()"> <option>Panel Type</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> <option value="E">E</option> <option value="F">F</option> <option value="M">M</option> <option value="O">O</option> <option value="Q">Q</option> <option value="R">R</option> <option value="S">S</option> <option value="T">T</option> <option value="V">V</option> <option value="Rev C">Rev C</option> <option value="Rev F">Rev F</option> <option value="Bead">Bead</option> </select> </td> <td> <select id="gradeAndThickness" name='gradeAndThickness' onchange="calculateTotal()"> <option>Grade and Thickness</option> <option value="4/4 Standard">4/4 Standard</option> <option value="4/4 Select">4/4 Select</option> <option value="5/4 Standard">5/4 Standard</option> <option value="5/4 Select">5/4 Select</option> </select> </td> <td> <select id="finish" name='finish' onchange="calculateTotal()"> <option>Finish</option> <option value="Clear">Clear</option> <option value="Wheat">Wheat</option> <option value="Fruitwood">Fruitwood</option> <option value="Heartwood">Heartwood</option> <option value="White Stain">White Stain</option> <option value="Cinnamon">Cinnamon</option> <option value="W. Prime">W. Prime</option> </select> </td> <td> <select id="doorOptions" name='doorOptions' onchange="calculateTotal()"> <option>Options</option> <option value="Finger Pulls">Finger Pulls</option> <option value="Hinge Holes">Hinge Holes</option> <option value="Lip As Pair">Lip As Pair</option> </select> </td> </tr> </table> </div> <div id="totalPrice"></div> <input type='submit' id='submit' value='Submit' onclick="calculateTotal()" /> </div> </form> </div> </div> </body> </html> 

现在，我只希望能够将计算结果输出到我的HTML中，然后再使此表单变得更加复杂。

Answer 1

变量getFinish不在函数calculateTotal（）中声明。 因此，您应在使用前声明此变量或函数。

Answer 2

在标签中删除onload ='hideTotal（）'，它将把您的javascript计算结果输出到我的html中