1
我試圖創建一個網站頁面，允許用戶選擇不同的單選按鈕。每個不同的單選按鈕代表一個產品選項。在這種情況下，我用計算機組件完成了它。所以如果用戶選擇一個不同的單選按鈕到預先檢查過的單選按鈕，那麼我希望網頁能夠動態地改變，例如在「總價格」上增加50英鎊。總價格將顯示在網頁的底部。Javascript根本無法使用HTML頁面
這是我目前的代碼，它不會工作！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Silicon Build</title>
<link rel="stylesheet" href="stylesheets/app.css">
<script src="bower_components/modernizr/modernizr.js"></script>
<!-- Custom CSS Stylesheet -->
<link rel="stylesheet" href="scss/app.css">
<!-- Custom Fonts -->
<link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
<script type="text/javascript">
function updateTotal() {
var basePrice = 287.26;
var optionsPrice = 287.26;
var shippingPrice = 12.99;
var cpu = 0;
var cooler = 0;
var ram = 0;
var mobo = 0;
var drive = 0;
var psu = 0;
var chassis = 0;
var os = 0;
function checkCpu() {
if(document.getElementById('cpu1').checked) {
cpu = 52.39;}
if(document.getElementById('cpu2').checked) {
cpu = 89.99;}
if(document.getElementById('cpu3').checked) {
cpu = 120.98;}}
function checkCooler() {
if(document.getElementById('cooler1').checked) {
cooler = 0;}
if(document.getElementById('cooler2').checked) {
cooler = 16.98;}}
function checkRam() {
if(document.getElementById('ram1').checked) {
ram = 20.99;}
if(document.getElementById('ram2').checked) {
ram = 39.98;}
if(document.getElementById('ram3').checked) {
ram = 42.98;}}
function checkMobo() {
if(document.getElementById('mobo1').checked) {
mobo = 39.98;}
if(document.getElementById('mobo2').checked) {
mobo = 46.99;}
if(document.getElementById('mobo3').checked) {
mobo = 79.99;}}
function checkDrive() {
if(document.getElementById('storage1').checked) {
drive = 36.98;}
if(document.getElementById('storage2').checked) {
drive = 55.98;}
if(document.getElementById('storage3').checked) {
drive = 40.98;}
if(document.getElementById('storage4').checked) {
drive = 66.98;}}
function checkPsu() {
if(document.getElementById('psu1').checked) {
psu = 29.99;}
if(document.getElementById('psu2').checked) {
psu = 62.99;}}
function checkChassis() {
if(document.getElementById('case1').checked) {
chassis = 27.95;}
if(document.getElementById('case2').checked) {
chassis = 69.95;}}
function checkOs() {
if(document.getElementById('os1').checked) {
os = 0;}
if(document.getElementById('os2').checked) {
os = 0;}
if(document.getElementById('os3').checked) {
os = 3;}
if(document.getElementById('os4').checked) {
os = 1;}
if(document.getElementById('os5').checked) {
os = 35.01;}
if(document.getElementById('os6').checked) {
os = 35.01;}
if(document.getElementById('os7').checked) {
os = 41.01;}
if(document.getElementById('os8').checked) {
os = 41.01;}}
function checkShipping() {
if(document.getElementById('shipping').value=='standard') {
shippingPrice = 12.99;}
if(document.getElementById('shipping').value=='three') {
shippingPrice = 20.99;}
if(document.getElementById('shipping').value=='overnight') {
shippingPrice = 28.99;}}
checkCpu();
checkCooler();
checkRam();
checkMobo();
checkDrive();
checkPsu();
checkChassis();
checkOs();
checkShipping();
var optionsPrice = cpu + cooler + ram + mobo + drive + psu + chassis + os;
var optionsPrice = optionsPrice.toFixed(2);
var shippingPrice = shippingPrice.toFixed(2);
var totalPrice = optionsPrice + shippingPrice;
var totalPrice = totalPrice.toFixed(2);
document.getElementById('optionsPrice').innerHTML = "Customizations: £" + optionsPrice;
document.getElementById('shippingPrice').innerHTML = "Shipping: £" + shippingPrice;
document.getElementById('totalPrice').innerHTML = "Total Price: £" + totalPrice;}
</script>
</head>
<body>
<!-- Navigational Menu -->
<?php include_once("header.html"); ?>
<!-- Main Content -->
<div class="row content">
<div class="columns large-12 small-12">
<h1>Mini Office Intel</h1>
<p>Customise your system to make it just right for you. We try to offer as many different options as we can. If we don't have a component just contact us and we check the compatibility of the component and use that instead.</p>
<p>Please note the prices shown in brackets indicate the additional price from the original specification of the system and do not change when a different component is selected.</p>
</div>
<!-- Item Selection -->
<form method="post" action="send_order.php">
<div class="columns small-12 large-12 product-title">
<p>Processor</p>
</div>
<div class="columns small-12 large-12 product-options">
<input type="radio" name="cpu" value="PentiumG3240" onchange="updateTotal()" id="cpu1" checked> Intel Pentium G3240 (+£0.00)<br>
<input type="radio" name="cpu" value="Core3-4170" onchange="updateTotal()" id="cpu2"> Intel Core i3-4170 (+£37.60)<br>
<input type="radio" name="cpu" value="Core3-4340" onchange="updateTotal()" id="cpu3"> Intel Core i3-4340 (+£68.59)<br>
</div>
<div class="columns small-12 large-12 product-title">
<p>Processor Cooler</p>
</div>
<div class="columns small-12 large-12 product-options">
<input type="radio" name="cooler" value="StockCooler" checked onchange="updateTotal()"id="cooler1"> Stock Cooler (+£0.00)<br>
<input type="radio" name="cooler" value="CoolerMstrTX3Evo" onchange="updateTotal()" id="cooler2"> Cooler Master Hyper TX3 Evo(+£16.98)<br>
</div>
<div class="columns small-12 large-12 product-title">
<p>Memory</p>
</div>
<div class="columns small-12 large-12 product-options">
<input type="radio" name="ram" value="KingstonFury4GB(1x4)1600" onchange="updateTotal()" id="ram1" checked> Kingston HyperX Fury Black 4GB (1x4) 1600MHz (+£0.00)<br>
<input type="radio" name="ram" value="KingstonFuryBlack8GB(2x4)1600" onchange="updateTotal()" id="ram2"> Kingston HyperX Fury Black 8GB (2x4) 1600MHz (+£18.99)<br>
<input type="radio" name="ram" value="CorsairVengLPBlack8GB(2x4)1600" onchange="updateTotal()" id="ram3"> Corsair Vengeance Low Profile Black 8GB (2x4) 1600MHz (+£21.99)<br>
</div>
<div class="columns small-12 large-12 product-title">
<p>Motherboard</p>
</div>
<div class="columns small-12 large-12 product-options">
<input type="radio" name="mobo" value="GigabyteGA-H81M-S2" onchange="updateTotal()" checked id="mobo1"> Gigabyte GA-H81M-S2H(+£0.00)<br>
<input type="radio" name="mobo" value="Asus H81M-PLUS" onchange="updateTotal()" id="mobo2"> Asus H81M-PLUS (+£7.01)<br>
<input type="radio" name="mobo" value="ASRockZ97MPro4" onchange="updateTotal()" id="mobo3"> ASRock Z97M Pro4 (+£40.01)<br>
</div>
<div class="columns small-12 large-12 product-title">
<p>Storage</p>
</div>
<div class="columns small-12 large-12 product-options">
<input type="radio" name="storage" value="Barracuda1TBHDD" onchange="updateTotal()" checked id="storage1"> Seagate Barracuda 1TB 72000RPM Hard Disk Drive(+£0.00)<br>
<input type="radio" name="storage" value="Barracuda2TBHDD" onchange="updateTotal()" id="storage2"> Seagate Barracuda 2TB Hard Disk Drive (+£19.00)<br>
<input type="radio" name="storage" value="KingSSDNowV300-120GB" onchange="updateTotal()" id="storage3"> Kingston SSDNow V300 Series 120GB Solid State Drive (+£2.01)<br>
<input type="radio" name="storage" value="KingSSDNowV300-240GB" onchange="updateTotal()" id="storage4"> Kingston SSDNow V300 Series 240GB Solid State Drive (+£35.01)<br>
</div>
<div class="columns small-12 large-12 product-title">
<p>Power Supply Unit</p>
</div>
<div class="columns small-12 large-12 product-options">
<input type="radio" name="psu" value="EVGA-430W-NonModular" onchange="updateTotal()" checked id="psu1"> EVGA 430W ATX 80+ Bronze Non-Modular Power Supply (+£0.00)<br>
<input type="radio" name="psu" value="Corsair-CX-600W" onchange="updateTotal()" id="psu2"> Corsair Builder Series CX 600W 80+ Modular Power Supply (+£33.00)<br>
</div>
<div class="columns small-12 large-12 product-title">
<p>Case</p>
</div>
<div class="columns small-12 large-12 product-options">
<input type="radio" name="case" value="FractalCore1100" onchange="updateTotal()" checked id="case1"> Fractal Design Core 1100(+£0.00)<br>
<input type="radio" name="case" value="FractalNode804Window" onchange="updateTotal()" id="case2"> Fractal Design Node 804 Windowed(+£42.00)<br>
</div>
<div class="columns small-12 large-12 product-title">
<p>Operating System</p>
</div>
<div class="columns small-12 large-12 product-options">
<input type="radio" name="os" value="Win10Home64" onchange="updateTotal()" checked id="os1"> Windows 10 Home 64-BIT (+£0.00)<br>
<input type="radio" name="os" value="Win10Home32" onchange="updateTotal()" id="os2"> Windows 10 Home 32-BIT (+£0.00)<br>
<input type="radio" name="os" value="Win8.1Home64" onchange="updateTotal()" id="os3"> Windows 8.1 Home 64-BIT (+£3.00)<br>
<input type="radio" name="os" value="Win7Home64" onchange="updateTotal()" id="os4"> Windows 7 Home 64-BIT (+£1.00)<br>
<input type="radio" name="os" value="Win10Pro64" onchange="updateTotal()" id="os5"> Windows 10 Pro 64-BIT (+£35.01)<br>
<input type="radio" name="os" value="Win10Pro32" onchange="updateTotal()" id="os6"> Windows 10 Pro 32-BIT (+£35.01)<br>
<input type="radio" name="os" value="Win8.1Pro64" onchange="updateTotal()" id="os7"> Windows 8.1 Pro 64-BIT (+£41.01)<br>
<input type="radio" name="os" value="Win7Pro64" onchange="updateTotal()" id="os8"> Windows 7 Pro 64-BIT (+£41.01)<br>
</div>
<div class="columns small-12 large-12 product-title shipping">
<p>Shipping</p>
</div>
<select name="shipping" onchange="updateTotal()" id="shipping">
<option value="standard">Standard signature upon delivery (5 working days) (+£12.99)</option>
<option value="three">3 day signature upon delivery (3 working days) (+£20.99)</option>
<option value="overnight">Overnight signature upon delivery (1 working day) (+£28.99)</option>
</select>
<div class="columns small-12 large-12">
<p>Base Price: £287.26</p>
<p id="optionsPrice">Customizations: £287.26</p>
<p id="shippingPrice">Shipping Price: £12.99</p>
<p id="totalPrice">Total Price: £300.25</p>
<input type="submit" id="submit" value="Checkout">
</div>
</form>
</div>
<!-- Footer -->
<?php include_once("footer.html"); ?>
<!-- Scripts -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="js/app.js"></script>
</body>
您是否檢查了開發者控制檯的錯誤？ – Pointy
所有'onchange =「updateTotal（）」'都可以被JS中的一個'document.addEventListener（'change'，updateTotal）'替換。 – Xufox
將代碼放入JSHint時會出現一些警告。 – Xufox