HTML&JavaScript表单的多个选项的总价不变
HTML & JavaScript form total price from multiple options not changing
我在表单中遇到一个问题,当选择另一个选项时,该问题会更新最终价格。我不确定问题出在哪里,但我已经彻底查找过了。我以前只使用过不同的变量名和id。这可能是最明显的错误,但我真的很感激你的帮助。请注意,我在JavaScript方面没有经验-我这样做只是为了练习,但我真的很难得到我想要的结果。我相信,如果这是我问题的复杂答案,帮助将帮助我了解我哪里出了问题,以供将来参考。
HTML:
<form name="pcoptions">
<label>Choose Your Build Time
<select name="buildtimeItem" onchange="calculatePrice()" id="buildtimeItem">
<option value="0.00">Standard Build - Ready to ship within 7 working days (£0.00)</option>
<option value="60">FAST TRACK BUILD - Ready to ship within 4 working days (+ £60.00)</option>
<option value="100.00">FAST TRACK BUILD- Ready to ship within 2 working days (+ £100.00)</option>
</select>
</label>
<label>Choose Your Warranty
<select name="warrantyItem" onchange="calculatePrice()" id="warrantyItem">
<option value="0.00">24 MONTH WARRANTY - Collect & Return (£0.00)</option>
<option value="119.00">36 MONTH WARRANTY - Collect & Return (+ £119.99)</option>
</select>
</label>
<label>Choose Your Operating System
<select name="osItem" onchange="calculatePrice()" id="osItem">
<option value="0.00">No Operating System (£0.00)</option>
<option value="77.99">Microsoft Windows 7 Home Premium 64 Bit (+ £77.99)</option>
<option value="116.99">Microsoft Windows 7 Professional 64 Bit OEM (+ £116.99)</option>
<option value="146.99">Microsoft Windows 7 Ultimate 64 Bit OEM (+ £146.99)</option>
<option value="77.99">Microsoft Windows 8.1 64 Bit (+ £77.99)</option>
<option value="116.99">Microsoft Windows 8.1 Pro 64 Bit (+ £116.99)</option>
</select>
</label>
<label>Choose Your Security Software
<select name="securityItem" onchange="calculatePrice()" id="securityItem">
<option value="0.00">30 Day Free Trial - Eset Smart Security Anti Virus and Internet Security (£0.00)</option>
<option value="26.99">Eset NOD32 AntiVirus - 1 Year License (+ £26.99)</option>
<option value="34.99">Eset Smart Security Anti Virus and Internet Security - 1 Year License (+ £34.99)</option>
<option value="54.99">Eset Smart Security Anti Virus and Internet Security - 2 Year License (+ £54.95)</option>
<option value="74.99">Eset Smart Security Anti Virus and Internet Security - 3 Year License (+ £74.99)</option>
<option value="0.00">No Security Software Supplied (£0.00)</option>
</select>
</label>
<label>Choose Your Case
<select name="casepcItem" onchange="calculatePrice()" id="casepcItem">
<option value="0.00">BitFenix Neos ATX Tower Case - Black/Red (£0.00)</option>
<option value="0.00">BitFenix Neos ATX Tower Case - Black (£0.00)</option>
<option value="0.00">BitFenix Neos ATX Tower Case - White/Silver (£0.00)</option>
<option value="0.00">BitFenix Neos ATX Tower Case - White/Red (£0.00)</option>
<option value="0.00">BitFenix Neos ATX Tower Case - White/Blue (£0.00)</option>
<option value="0.00">BitFenix Neos ATX Tower Case - White/White (£0.00)</option>
<option value="0.00">BitFenix Neos ATX Tower Case - Black/Silver (£0.00)</option>
<option value="0.00">BitFenix Neos ATX Tower Case - Black/Blue (£0.00)</option>
</select>
</label>
<label>Choose Your Memory
<select name="ramItem" onchange="calculatePrice()" id="ramItem">
<option value="0.00">8GB (2x4GB) DDR3 1600MHz Dual Channel (£0.00)</option>
<option value="66.96">16GB (2x8GB) DDR3 1600MHz Dual Channel (+ £66.96)</option>
</select>
</label>
<label>Choose Your Primary Hard Drive / Solid State Drive
<select name="primaryhddItem" onchange="calculatePrice()" id="primaryhddItem">
<option value="0.00">Seagate Barracuda 500GB 7200RPM Hard Drive (£0.00)</option>
<option value="5.46">Seagate Barracuda 1TB 7200RPM Hard Drive (+ £5.46)</option>
<option value="26.50">Seagate Barracuda 2TB 7200RPM Hard Drive (+ £26.50)</option>
<option value="25.50">Samsung 120GB 840 Evo Series Solid State Drive (+ £25.50)</option>
<option value="65.46">Samsung 250GB 840 Evo Series Solid State Drive (+ £65.46)</option>
<option value="145.50">Samsung 500GB 840 Evo Series Solid State Drive (+ £145.50)</option>
<option value="284.99">Samsung 1TB 840 Evo Series Solid State Drive (+ £284.99)</option>
</select>
</label>
<label>Choose Your Secondary Hard Drive / Solid State Drive
<select name="secondaryhddItem" onchange="calculatePrice()" id="secondaryhddItem">
<option value="0.00">No Second Hard Drive (£0.00)</option>
<option value="59.99">Samsung 120GB 840 Evo Series Solid State Drive (+ £59.99)</option>
<option value="99.95">Samsung 250GB 840 Evo Series Solid State Drive (+ £99.95)</option>
<option value="179.99">Samsung 500GB 840 Evo Series Solid State Drive (+ £179.99)</option>
<option value="319.48">Samsung 1TB 840 Evo Series Solid State Drive (+ £319.48)</option>
<option value="39.95">Seagate Barracuda 1TB 7200RPM Hard Drive (+ £39.95)</option>
<option value="60.98">Seagate Barracuda 2TB 7200RPM Hard Drive (+ £60.98)</option>
<option value="76.99">Seagate Barracuda 3TB 7200RPM Hard Drive (+ £76.99)</option>
</select>
</label>
<label>Choose Your Graphics Card
<select name="gpuitem" onchange="calculatePrice()" id="gpuItem">
<option value="0.00">AMD Radeon R7 240 2048MB Graphics Card (£0.00)</option>
<option value="18.00">AMD Radeon R7 250 2048MB Graphics Card (+ £18.00)</option>
<option value="35.00">AMD Radeon R7 260X 2048MB Graphics Card (+ £35.00)</option>
<option value="84.86">AMD Radeon R9 270X 2048MB Graphics Card (+ £84.96)</option>
<option value="105.00">AMD Radeon R9 270X 4096MB Graphics Card (+ £105.00)</option>
<option value="143.00">AMD Radeon R9 280 3072MB Graphics Card (+ £143.00)</option>
<option value="155.00">AMD Radeon R9 280X 3072MB Graphics Card (+ £155.00)</option>
</select>
</label>
<label>Choose Your Sound Card
<select name="soundItem" onchange="calculatePrice()" id="soundItem">
<option value="0.00">No Sound Card Upgrade (£0.00)</option>
<option value="22.99">Asus Xonar DG 5.1 Sound Card With Built In Headphone Amp (+ £22.99)</option>
<option value="34.99">Asus Xonar DS 7.1 Sound Card (+ £34.99)</option>
<option value="49.99">Asus Xonar D1 7.1 Sound Card (+ £49.99)</option>
<option value="89.99">Asus Xonar D2 7.1 Sound Card (+ £89.99)</option>
</select>
</label>
<button type="button" onclick="calculatePrice()"></button>
Total Price<INPUT type="text" id="finalpriceexcvat"/>
</form>
下面是与之配套的JavaScript:
function calculatePrice(pcoptions) {
var cost = document.getElementById("buildtimeItem");
var buildtime = cost.options[cost.selectedIndex].value;
var cost2 = document.getElementById("warrantyItem");
var warranty = cost2.options[cost2.selectedIndex].value;
var cost3 = document.getElementById("osItem");
var os = cost3.options[cost3.selectedIndex].value;
var cost4 = document.getElementById("securityItem");
var security = cost4.options[cost4.selectedIndex].value;
var cost5 = document.getElementById("casepcItem");
var casepc = cost5.options[cost5.selectedIndex].value;
var cost6 = document.getElementById("ramItem");
var ram = cost6.options[cost6.selectedIndex].value;
var cost7 = document.getElementById("primaryhddItem");
var primaryhdd = cost7.options[cost7.selectedIndex].value;
var cost8 = document.getElementById("secondaryhddItem");
var secondaryhdd = cost8.options[cost8.selectedIndex].value;
var cost9 = document.getElementById("gpuItem");
var gpu = cost9.options[cost9.selectedIndex].value;
var cost10 = document.getElementById("soundItem");
var sound = cost10.options[cost10.selectedIndex].value;
buildtime = parseInt(buildtime, 10);
warranty = parseInt(warranty, 10);
os = parseInt(os, 10);
security = parseInt(security, 10);
casepc = parseInt(casepc, 10);
ram = parseInt(ram, 10);
primaryhdd = parseInt(primaryhdd, 10);
secondaryhdd = parseInt(secondaryhdd, 10);
gpu = parseInt(gpu, 10);
sound = parseInt(sound, 10);
var total = buildtime + warranty + os + security + casepc + ram + primaryhdd + secondaryhdd + gpu + sound;
document.getElementById("finalpriceexcvat").value = total;
}
我的练习来自其他网站,在那里我会查看它们,并简单地尝试做它们所做的事情,但格式不同。你们中的一些人可能从某个地方认出了布局。我想要的结果是明确的——我只是想在每一家公司的期权发生变化时,为其定价。如果可能的话,每件默认为(0.00)的商品都会有一个最低价格——这样做简单吗?
同样,如果我的问题答案很明显,我很抱歉,但我正在努力自己解决它。
感谢
编辑
问题解决了,价格现在显示在总价框中。不过,我还有另一个问题,作为一个小问题——我该如何确保结果显示它需要多少便士?目前,它只显示了以英镑为单位的成本(所以基本上是小数)。当我选择多个选项时,ParseFloat返回超过2个十进制数字的数字。
编辑2
小数点问题已经解决,现在只剩下一个问题了——我该如何在输入中将PC的默认值设置为最小值,当选择一个选项时,该值将在123.45英镑的基础上添加。我试着在HTML的输入中输入value=",但它只是删除了值,并用所选的选项替换它。感谢
使用
parseFloat()
而不是
parseInt()
看看这个jsfiddle
还更正了第二个保修选项中的定价。
相关文章:
- 我的单元测试选项是什么
- 如何更改bigquery API中的计费层选项
- jquery点击函数select&取消选择
- 使用Javascript获取所选选项ID
- Selectize.js:如何对整数值的选项进行排序
- 关于&从win8 RC转换为win8 RTM后,首选项弹出按钮为空
- AngularJS ng选项与对象属性值&标题
- 从jquery中的select选项添加两个不同的数组值(text&value)
- Jquery UI选项卡&选择方框-下一个/上一个按钮
- 需要jquery&litte-html-css改进猫头鹰幻灯片与选项卡导航(分页)
- 将apple选项卡空间转换为
- 钛:标签&选项卡组-自定义;backgroundImage”;
- HTML&JavaScript表单的多个选项的总价不变
- 要添加的搜索功能&从select下拉列表中删除选项
- 引导选项卡&流星
- 禁用表单提交时的回车键&改为将其更改为选项卡
- 重定向窗口页面&选项卡到外部网站
- 选择选项背面丢失按钮&搜索结果恢复为默认选项
- AngularJS删除&如果其他选择发生更改,则添加选择框选项
- 监视所有当前&未来的windows+选项卡