在HTML中使用表格來計算總價格

我該如何編寫一個函數來計算用戶選擇的計算機組件的總價格，這是我迄今爲止的，但現在我似乎被卡住了。有任何想法嗎？我正在嘗試爲內存價格，硬盤價格和網絡價格創建一個陣列。然後不知道該從哪裏出發。在HTML中使用表格來計算總價格

<script type = "text/javascript"> 

function calculatePrice(myform) 
{ 
    var memPrice=myForm.memoryItem.selectedIndex; 



} 

</script> 

</head> 
<body> 
<table width="80%" align="center" cellpadding="0" cellspacing="0"> 
<tr> 
<td height="75" colspan="2"><img src="CCLogo.jpg" width="515" height="79"></td> 
</tr> 
<tr> 
<td width="29%" height="103"><img src="computer.jpg" width="120" height="83"></td> 
<td width="71%"><p class="c">The base price of this Computer is $499.<br />Because this is back-to-school special<br /> the manufacturer offers limited options.</p></td> 
</tr> 
<tr> 
<td height="56" colspan="2" class="d">Intel i5 Pentium, 4GB RAM, 500 GB HD, DVD/CDROM Drive, 2GB 3D AGP<br /> graphics adapter, 15 inch monitor, 32-bit Wave sound card and speakers</td> 
</tr> 
<tr> 
<td>Optional Upgrades</td> 
<td>&nbsp;</td> 
</tr> 
<tr> 
<td height="50"> 
<FORM Name="myform"> 
<SELECT NAME="memoryItem" onChange="calculatePrice(myform)"> 
    <OPTION>Select One Choice from List-Memory Upgrade 
    <OPTION>8 GB add $49 
    <OPTION>12 GB add $98 
    <OPTION>16 GB add $159 

</SELECT> 


</td> 
<td>&nbsp;</td> 
</tr> 
<tr> 
<td height="48"> 

<SELECT NAME="hddItem" onChange="calculatePrice(myform)"> 
    <OPTION>Select One Choice from List-HDD Upgrade 
    <OPTION>1 TB HD add $109 
    <OPTION>1.5 TB HD add $150 
    <OPTION>2 TB HD add $199 
    <OPTION>250 GB SSD add $299 

    </SELECT> 

</td> 
<td>&nbsp;</td> 
</tr> 
<tr> 
<td height="48"> 

<SELECT NAME="networkItem" onChange="calculatePrice(myform)"> 
    <OPTION>Select One Choice from List- Network Upgrade 
    <OPTION>56K V90 or X2 Modem add $109 
    <OPTION>10/100 NIC add $79 
    <OPTION>Combo Modem and NIC add $279 

</SELECT> 
</FORM> 
</td> 
<td>&nbsp;</td> 
</tr> 
<tr> 
<td height="58"> 
<button type="button" onclick="caculatePrice()">Calculate</button> 
</td> 
<td>&nbsp;</td> 
</tr> 
<tr> 
<td height="73">The new calculated price:<INPUT Type="Text" Name="PicExtPrice" Size=8> </td> 
<td>&nbsp;</td> 
</tr> 
</table> 
</body>

來源

2013-12-11 Jessica

啓動並使用它。通過使用'this'關鍵字來傳遞select而不是myform。也許你需要先遵循幾個js教程？我看到函數名稱中的拼寫錯誤，並且你沒有通過按鈕上的任何東西 – mplungjan

很好的問題，但你可以嘗試下面的答案，它爲我工作 – humphrey

添加ID：S選擇元素
增加價值屬性選項標籤
修復的JavaScript

事情是這樣的：

function calculatePrice(){ 

     //Get selected data 
     var elt = document.getElementById("memoryItem"); 
     var memory = elt.options[elt.selectedIndex].value; 

     elt = document.getElementById("hddItem"); 
     var hdd = elt.options[elt.selectedIndex].value; 

     elt = document.getElementById("networkItem"); 
     var network = elt.options[elt.selectedIndex].value; 

     //convert data to integers 
     memory = parseInt(memory); 
     hdd = parseInt(hdd); 
     network = parseInt(network); 

     //calculate total value 
     var total = memory+hdd+network; 

     //print value to PicExtPrice 
     document.getElementById("PicExtPrice").value=total; 

}

和HTML

<FORM Name="myform"> 
    <SELECT NAME="memoryItem" onChange="calculatePrice()" id="memoryItem"> 
     <OPTION value="0">Select One Choice from List-Memory Upgrade</OPTION> 
     <OPTION value="49">8 GB add $49</OPTION> 
     <OPTION value="98">12 GB add $98</OPTION> 
     <OPTION value="159">16 GB add $159</OPTION> 
    </SELECT> 

    <SELECT NAME="hddItem" onChange="calculatePrice()" id="hddItem"> 
     <OPTION value="0">Select One Choice from List-HDD Upgrade</OPTION> 
     <OPTION value="109">1 TB HD add $109</OPTION> 
     <OPTION value="150">1.5 TB HD add $150</OPTION> 
     <OPTION value="199">2 TB HD add $199</OPTION> 
     <OPTION value="299">250 GB SSD add $299</OPTION> 
    </SELECT> 

    <SELECT NAME="networkItem" onChange="calculatePrice()" id="networkItem"> 
     <OPTION value="0">Select One Choice from List- Network Upgrade</OPTION> 
     <OPTION value="109">56K V90 or X2 Modem add $109</OPTION> 
     <OPTION value="79">10/100 NIC add $79</OPTION> 
     <OPTION value="279">Combo Modem and NIC add $279</OPTION> 
    </SELECT> 
</FORM> 

<button type="button" onclick="calculatePrice()">Calculate</button> 
The new calculated price:<INPUT type="text" id="PicExtPrice" Size=8>

通過給每個選項的值嘗試在這裏http://jsfiddle.net/Wm6zC/

來源

2013-12-11 20:31:43 daker

輝煌！有沒有簡單的方法來防止用戶編輯計算的字段？ –

@Notamachine你可以使用[readonly屬性]（http://www.w3schools.com/tags/att_input_readonly.asp） - http://jsfiddle.net/Wm6zC/762/ – daker

在HTML中使用表格來計算總價格

回答

相關問題