2016-08-03 68 views
1

我正在對HTML進行介紹課程,並一直在努力尋找使用java的頁面的錯誤。我相信,我想提出一個簡單的錯誤,但我沒有看到它需要幫助讓字段填充使用Javascript

這裏是代碼的撥弄我一起工作: https://jsfiddle.net/Terranova1340/ctc66nmu/2/

<body onload="processForm()"> 
<div id="wrapper"> 
<form id="cars" method="get"> 
<h1>AutoMart Sales Order Form</h1> 
<img id="imgCar" src="civic2.jpg" /> 
<table class="Controls"> 
<tr> 
<td><label for="Model">Select a Model:</label><br></td> 
<td><select id="selModel" onchange="chgImage()"> 
    <option value="civic" >Civic</option> 
    <option value="accord" >Accord</option> 
    </select></td> 
</tr> 
<tr> 
<td><label for="optAcces">Optional Accessories:</label><br></td> 
<td><label class='checkbox'><input type="checkbox" id="optAcces1"value="stereoSys" onchange="processForm()"> Stereo System<br> 
<label class='checkbox'><input type="checkbox" id="optAcces2" value="leatherInt" onchange="processForm()"> Leather Interiors<br> 
<label class='checkbox'><input type="checkbox" id="optAcces3" value="gpsSys" onchange="processForm()"> GPS System<br><br> 
</td> 
</tr> 
<tr> 
</tr> 
<tr> 
<tr> 
</tr> 
<td><label for="extFin">Exterior Finish:</label><br></td> 
<td><label class='radiolabel'><input type="radio" name="selectedfinish" id="stanFin" onchange="processForm()"> Standard Finish<br> 
<label class='radiolabel'><input type="radio" name="selectedfinish" id="metalFin" onchange="processForm()"> Metalic Finish<br> 
<label class='radiolabel'><input type="radio" name="selectedfinish" id="custFin" onchange="processForm()"> Customized Finish<br> 
</td> 
</tr> 
<tr> 
<td><label for="base">Base Price</label><br></td> 
<td><input type="text" id="basePrice" style="text-align:right;" readonly><br></td> 
</tr> 
<tr> 
<td><label for="access">Accessories Price</label><br></td> 
<td><input type="text" id="accessPrice" style="text-align:right;" readonly><br></td> 
</tr> 
<tr> 
<td><label for="extPrice">Exterior Finish Price</label><br></td> 
<td><input type="text" id="extPrice" style="text-align:right;" readonly><br></td> 
</tr> 
<tr> 
<td><label>Estimated Total Price</label><br></td> 
<td><input class- "ReadOnlyControls" type="text" name="estPrice" id="estPrice" style="text-align:right;" readonly><br></td> 
</tr> 
</table> 




<input class="buttons" type="reset" value="Clear"> 
<input class="buttons" type="button" onclick="window.print()"; value="Print Form" id="print"> 





</form> 
</div> 
</body> 
</html> 

Java是

function chgImage() { 
    if (document.getElementById("selModel").value =="civic") 
     { 
      document.getElementById("imgCar").src="Civic2.jpg"; 
     } 
    else 
    { 
     document.getElementById("imgCar").src="Accord2.jpg"; 
    } 
    processForm(); 
} 

function processForm(){ 

    var bPrice = 0; 
    var aPrice = 0; 
    var oPrice = 0; 
    var tPrice = 0; 

    if (document.getElementById("selModel").value =="civic") 
    { 
      bPrice = 17355.89; 

     if (document.getElementById("optAccess1").checked == true) 
     { 
      aPrice = aPrice + 400.22; 
     } 
     if (document.getElementById("optAccess2").checked == true) 
     { 
      aPrice = aPrice + 850.44; 
     } 
     if (document.getElementById("optAccess3").checked == true) 
     { 
      aPrice = aPrice + 1600.00; 
     } 
     if (document.getElementById("metalFin").checked == true) 
     { 
      oPrice = 305.72; 
     } 
     if (document.getElementById("custFin").checked == true) 
     { 
      oPrice = 350.00; 
     } 
    } 
    else 
    { 
    basePrice = 19856.79; 

     if (document.getElementById("optAccess1").checked == true) 
     { 
      aPrice = aPrice + 500.89; 
     } 
     if (document.getElementById("optAccess2").checked == true) 
     { 
      aPrice = aPrice + 1015.85; 
     } 
     if (document.getElementById("optAccess3").checked == true) 
     { 
      aPrice = aPrice + 1600.00; 
     } 
     if (document.getElementById("metalFin").checked == true) 
     { 
      oPrice = 385.67; 
     } 
     if (document.getElementById("custFin").checked == true) 
     { 
      oPrice = 400.00; 
     } 
    } 



    //calculate total 

    tPrice = bPrice+aPrice+oPrice; 
    document.getElementById("basePrice").value = "$" + formatCurrency(bPrice).toString(); 
    document.getElementById("accessPrice").value = "$" + formatCurrency(aPrice).toString(); 
    document.getElementById("extPrice").value = "$" + formatCurrency(oPrice).toString(); 
    document.getElementById("estPrice").value = "$" + formatCurrency(tPrice).toString(); 

    } 

    function formatCurrency(num){ 
    num = isNaN(num) || num === ''|| num === null ? 0.00 : num; 
    return parseFloat(num).toFixed(2); 
    } 

我問題是基本價格到預計總價格字段沒有填充。

在此先感謝!

+1

這是** **的JavaScript,而不是Java。 – Gili

+0

感謝您的糾正,抱歉的混淆。 – Terranova1340

回答

1

function chgImage() { 
 
    if (document.getElementById("selModel").value =="civic") 
 
     { 
 
      document.getElementById("imgCar").src="Civic2.jpg"; 
 
     } 
 
    else 
 
    { 
 
     document.getElementById("imgCar").src="Accord2.jpg"; 
 
    } 
 
    processForm(); 
 
} 
 

 
function processForm(){ 
 

 
    var bPrice = 0; 
 
    var aPrice = 0; 
 
    var oPrice = 0; 
 
    var tPrice = 0; 
 

 
    if (document.getElementById("selModel").value =="civic") 
 
    { 
 
      bPrice = 17355.89; 
 

 
     if (document.getElementById("optAccess1").checked == true) 
 
     { 
 
      aPrice = aPrice + 400.22; 
 
     } 
 
     if (document.getElementById("optAccess2").checked == true) 
 
     { 
 
      aPrice = aPrice + 850.44; 
 
     } 
 
     if (document.getElementById("optAccess3").checked == true) 
 
     { 
 
      aPrice = aPrice + 1600.00; 
 
     } 
 
     if (document.getElementById("metalFin").checked == true) 
 
     { 
 
      oPrice = 305.72; 
 
     } 
 
     if (document.getElementById("custFin").checked == true) 
 
     { 
 
      oPrice = 350.00; 
 
     } 
 
    } 
 
    else 
 
    { 
 
    basePrice = 19856.79; 
 

 
     if (document.getElementById("optAccess1").checked == true) 
 
     { 
 
      aPrice = aPrice + 500.89; 
 
     } 
 
     if (document.getElementById("optAccess2").checked == true) 
 
     { 
 
      aPrice = aPrice + 1015.85; 
 
     } 
 
     if (document.getElementById("optAccess3").checked == true) 
 
     { 
 
      aPrice = aPrice + 1600.00; 
 
     } 
 
     if (document.getElementById("metalFin").checked == true) 
 
     { 
 
      oPrice = 385.67; 
 
     } 
 
     if (document.getElementById("custFin").checked == true) 
 
     { 
 
      oPrice = 400.00; 
 
     } 
 
    } 
 

 

 

 
    //calculate total 
 

 
    tPrice = bPrice+aPrice+oPrice; 
 
    document.getElementById("basePrice").value = "$" + formatCurrency(bPrice).toString(); 
 
    document.getElementById("accessPrice").value = "$" + formatCurrency(aPrice).toString(); 
 
    document.getElementById("extPrice").value = "$" + formatCurrency(oPrice).toString(); 
 
    document.getElementById("estPrice").value = "$" + formatCurrency(tPrice).toString(); 
 

 
    } 
 

 
    function formatCurrency(num){ 
 
    num = isNaN(num) || num === ''|| num === null ? 0.00 : num; 
 
    return parseFloat(num).toFixed(2); 
 
    }
<body onload="processForm()"> 
 
<div id="wrapper"> 
 
<form id="cars" method="get"> 
 
<h1>AutoMart Sales Order Form</h1> 
 
<img id="imgCar" src="civic2.jpg" /> 
 
<table class="Controls"> 
 
<tr> 
 
<td><label for="Model">Select a Model:</label><br></td> 
 
<td><select id="selModel" onchange="chgImage()"> 
 
    <option value="civic" >Civic</option> 
 
    <option value="accord" >Accord</option> 
 
    </select></td> 
 
</tr> 
 
<tr> 
 
<td><label for="optAcces">Optional Accessories:</label><br></td> 
 
<td><label class='checkbox'><input type="checkbox" id="optAccess1"value="stereoSys" onchange="processForm()"> Stereo System<br> 
 
<label class='checkbox'><input type="checkbox" id="optAccess2" value="leatherInt" onchange="processForm()"> Leather Interiors<br> 
 
<label class='checkbox'><input type="checkbox" id="optAccess3" value="gpsSys" onchange="processForm()"> GPS System<br><br> 
 
</td> 
 
</tr> 
 
<tr> 
 
</tr> 
 
<tr> 
 
<tr> 
 
</tr> 
 
<td><label for="extFin">Exterior Finish:</label><br></td> 
 
<td><label class='radiolabel'><input type="radio" name="selectedfinish" id="stanFin" onchange="processForm()"> Standard Finish<br> 
 
<label class='radiolabel'><input type="radio" name="selectedfinish" id="metalFin" onchange="processForm()"> Metalic Finish<br> 
 
<label class='radiolabel'><input type="radio" name="selectedfinish" id="custFin" onchange="processForm()"> Customized Finish<br> 
 
</td> 
 
</tr> 
 
<tr> 
 
<td><label for="base">Base Price</label><br></td> 
 
<td><input type="text" id="basePrice" style="text-align:right;" readonly><br></td> 
 
</tr> 
 
<tr> 
 
<td><label for="access">Accessories Price</label><br></td> 
 
<td><input type="text" id="accessPrice" style="text-align:right;" readonly><br></td> 
 
</tr> 
 
<tr> 
 
<td><label for="extPrice">Exterior Finish Price</label><br></td> 
 
<td><input type="text" id="extPrice" style="text-align:right;" readonly><br></td> 
 
</tr> 
 
<tr> 
 
<td><label>Estimated Total Price</label><br></td> 
 
<td><input class- "ReadOnlyControls" type="text" name="estPrice" id="estPrice" style="text-align:right;" readonly><br></td> 
 
</tr> 
 
</table> 
 

 

 

 

 
<input class="buttons" type="reset" value="Clear"> 
 
<input class="buttons" type="button" onclick="window.print()"; value="Print Form" id="print"> 
 

 

 

 

 

 
</form> 
 
</div> 
 
</body> 
 
</html>

您正在使用錯誤的id's,改變optAccess1optAccess2optAccess3這裏

<td><label class='checkbox'><input type="checkbox" id="optAccess1"value="stereoSys" onchange="processForm()"> Stereo System<br> 
    <label class='checkbox'><input type="checkbox" id="optAccess2" value="leatherInt" onchange="processForm()"> Leather Interiors<br> 
    <label class='checkbox'><input type="checkbox" id="optAccess3" value="gpsSys" onchange="processForm()"> GPS System<br><br> 
    </td> 
+0

Awsome!這樣糾正了一半的問題。但是,當我從思域改爲雅閣時,同樣的事情會像以前一樣發生。 – Terranova1340

+0

我明白了,非常感謝您的幫助!我花了一天的更多時間在牆上敲打我的頭。 – Terranova1340