HTML& JavaScript形式总价格来自多个选项不变

时间:2014-09-25 09:00:16

标签: javascript html

我在表单中遇到问题,在选择其他选项时更新最终价格。我不确定问题出在哪里,但我已经彻底了解了它。我之前只使用了不同的变量名和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 =“”,但它只是删除了值并将其替换为所选的选项。感谢

1 个答案:

答案 0 :(得分:1)

使用

parseFloat()

而不是

parseInt()

请参阅此jsfiddle

还更正了第二个保修期内的定价。