Javascript根本无法使用HTML页面

时间：2015-08-08 19:08:23

标签： javascript html

我正在尝试创建一个网站页面，允许用户选择不同的单选按钮。每个不同的单选按钮代表一个产品选项。在这种情况下，我用计算机组件完成了它。因此，如果用户选择不同的单选按钮到预先检查的按钮，那么我希望通过在“总价”上添加例如50英镑来动态地改变网页。总价格将显示在网页的底部。

这是我目前的代码，它无论如何都无法运作！

<!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 (+&pound;0.00)<br>
                <input type="radio" name="cpu" value="Core3-4170" onchange="updateTotal()" id="cpu2"> Intel Core i3-4170 (+&pound;37.60)<br>
                <input type="radio" name="cpu" value="Core3-4340" onchange="updateTotal()" id="cpu3"> Intel Core i3-4340 (+&pound;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 (+&pound;0.00)<br>
                <input type="radio" name="cooler" value="CoolerMstrTX3Evo" onchange="updateTotal()" id="cooler2">  Cooler Master Hyper TX3 Evo(+&pound;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 (+&pound;0.00)<br>
                <input type="radio" name="ram" value="KingstonFuryBlack8GB(2x4)1600" onchange="updateTotal()" id="ram2"> Kingston HyperX Fury Black 8GB (2x4) 1600MHz (+&pound;18.99)<br>
                <input type="radio" name="ram" value="CorsairVengLPBlack8GB(2x4)1600" onchange="updateTotal()" id="ram3"> Corsair Vengeance Low Profile Black 8GB (2x4) 1600MHz (+&pound;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(+&pound;0.00)<br>
                <input type="radio" name="mobo" value="Asus H81M-PLUS" onchange="updateTotal()" id="mobo2"> Asus H81M-PLUS (+&pound;7.01)<br>
                <input type="radio" name="mobo" value="ASRockZ97MPro4" onchange="updateTotal()" id="mobo3"> ASRock Z97M Pro4 (+&pound;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(+&pound;0.00)<br>
                <input type="radio" name="storage" value="Barracuda2TBHDD" onchange="updateTotal()" id="storage2"> Seagate Barracuda 2TB Hard Disk Drive (+&pound;19.00)<br>
                <input type="radio" name="storage" value="KingSSDNowV300-120GB" onchange="updateTotal()" id="storage3"> Kingston SSDNow V300 Series 120GB Solid State Drive (+&pound;2.01)<br> 
                <input type="radio" name="storage" value="KingSSDNowV300-240GB" onchange="updateTotal()" id="storage4"> Kingston SSDNow V300 Series 240GB Solid State Drive (+&pound;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 (+&pound;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 (+&pound;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(+&pound;0.00)<br>
                <input type="radio" name="case" value="FractalNode804Window" onchange="updateTotal()" id="case2"> Fractal Design Node 804 Windowed(+&pound;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 (+&pound;0.00)<br>
                <input type="radio" name="os" value="Win10Home32" onchange="updateTotal()" id="os2"> Windows 10 Home 32-BIT (+&pound;0.00)<br>
                <input type="radio" name="os" value="Win8.1Home64" onchange="updateTotal()" id="os3"> Windows 8.1 Home 64-BIT (+&pound;3.00)<br>
                <input type="radio" name="os" value="Win7Home64" onchange="updateTotal()" id="os4"> Windows 7 Home 64-BIT (+&pound;1.00)<br>
                <input type="radio" name="os" value="Win10Pro64" onchange="updateTotal()" id="os5"> Windows 10 Pro 64-BIT (+&pound;35.01)<br>
                <input type="radio" name="os" value="Win10Pro32" onchange="updateTotal()" id="os6"> Windows 10 Pro 32-BIT (+&pound;35.01)<br>
                <input type="radio" name="os" value="Win8.1Pro64" onchange="updateTotal()" id="os7"> Windows 8.1 Pro 64-BIT (+&pound;41.01)<br>
                <input type="radio" name="os" value="Win7Pro64" onchange="updateTotal()" id="os8"> Windows 7 Pro 64-BIT (+&pound;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) (+&pound;12.99)</option>
                <option value="three">3 day signature upon delivery (3 working days) (+&pound;20.99)</option>
                <option value="overnight">Overnight signature upon delivery (1 working day) (+&pound;28.99)</option>
            </select>
            <div class="columns small-12 large-12">
            <p>Base Price: &pound;287.26</p>
            <p id="optionsPrice">Customizations: &pound;287.26</p>
            <p id="shippingPrice">Shipping Price: &pound;12.99</p>
            <p id="totalPrice">Total Price: &pound;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>

3 个答案:

答案 0 :(得分：5)

您的代码中的问题可以通过现代浏览器的Web检查器显示，尤其是通过使用JavaScript调试器。运行代码，我发现这些行导致了问题：

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);

您正在将optionsPrice和shippingPrice转换为固定的十进制表示形式。这实际上会将optionsPrice以及shippingPrice转换为string。当您将两个字符串连接在一起时（就像在var totalPrice = optionsPrice + shippingPrice;中一样），您会得到另一个字符串。例如，"299.33" + "249.99" = "299.33249.99"。这可能不是您所期望的而不是您想要的。

解决此问题的最简单方法是确保+ Number为string而不是parseFloat()。查看JavaScript的Activity方法。

答案 1 :(得分：1)

问题在于你的toFixed（）函数。你将toFixed（）应用于一个字符串，使用parseFloat（）将其解析为float，就像这样。

var totalPrice = parseFloat(totalPrice.toFixed(2));

这是工作演示。

 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 = parseFloat(optionsPrice.toFixed(2));
   var shippingPrice = parseFloat(shippingPrice.toFixed(2));
   var totalPrice = optionsPrice + shippingPrice;
   var totalPrice = parseFloat(totalPrice.toFixed(2));

   document.getElementById('optionsPrice').innerHTML = "Customizations: £" + optionsPrice;
   document.getElementById('shippingPrice').innerHTML = "Shipping: £" + shippingPrice;
   document.getElementById('totalPrice').innerHTML = "Total Price: £" + totalPrice;
 }
<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 (+&pound;0.00)
      <br>
      <input type="radio" name="cpu" value="Core3-4170" onchange="updateTotal()" id="cpu2">Intel Core i3-4170 (+&pound;37.60)
      <br>
      <input type="radio" name="cpu" value="Core3-4340" onchange="updateTotal()" id="cpu3">Intel Core i3-4340 (+&pound;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 (+&pound;0.00)
      <br>
      <input type="radio" name="cooler" value="CoolerMstrTX3Evo" onchange="updateTotal()" id="cooler2">Cooler Master Hyper TX3 Evo(+&pound;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 (+&pound;0.00)
      <br>
      <input type="radio" name="ram" value="KingstonFuryBlack8GB(2x4)1600" onchange="updateTotal()" id="ram2">Kingston HyperX Fury Black 8GB (2x4) 1600MHz (+&pound;18.99)
      <br>
      <input type="radio" name="ram" value="CorsairVengLPBlack8GB(2x4)1600" onchange="updateTotal()" id="ram3">Corsair Vengeance Low Profile Black 8GB (2x4) 1600MHz (+&pound;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(+&pound;0.00)
      <br>
      <input type="radio" name="mobo" value="Asus H81M-PLUS" onchange="updateTotal()" id="mobo2">Asus H81M-PLUS (+&pound;7.01)
      <br>
      <input type="radio" name="mobo" value="ASRockZ97MPro4" onchange="updateTotal()" id="mobo3">ASRock Z97M Pro4 (+&pound;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(+&pound;0.00)
      <br>
      <input type="radio" name="storage" value="Barracuda2TBHDD" onchange="updateTotal()" id="storage2">Seagate Barracuda 2TB Hard Disk Drive (+&pound;19.00)
      <br>
      <input type="radio" name="storage" value="KingSSDNowV300-120GB" onchange="updateTotal()" id="storage3">Kingston SSDNow V300 Series 120GB Solid State Drive (+&pound;2.01)
      <br>
      <input type="radio" name="storage" value="KingSSDNowV300-240GB" onchange="updateTotal()" id="storage4">Kingston SSDNow V300 Series 240GB Solid State Drive (+&pound;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 (+&pound;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 (+&pound;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(+&pound;0.00)
      <br>
      <input type="radio" name="case" value="FractalNode804Window" onchange="updateTotal()" id="case2">Fractal Design Node 804 Windowed(+&pound;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 (+&pound;0.00)
      <br>
      <input type="radio" name="os" value="Win10Home32" onchange="updateTotal()" id="os2">Windows 10 Home 32-BIT (+&pound;0.00)
      <br>
      <input type="radio" name="os" value="Win8.1Home64" onchange="updateTotal()" id="os3">Windows 8.1 Home 64-BIT (+&pound;3.00)
      <br>
      <input type="radio" name="os" value="Win7Home64" onchange="updateTotal()" id="os4">Windows 7 Home 64-BIT (+&pound;1.00)
      <br>
      <input type="radio" name="os" value="Win10Pro64" onchange="updateTotal()" id="os5">Windows 10 Pro 64-BIT (+&pound;35.01)
      <br>
      <input type="radio" name="os" value="Win10Pro32" onchange="updateTotal()" id="os6">Windows 10 Pro 32-BIT (+&pound;35.01)
      <br>
      <input type="radio" name="os" value="Win8.1Pro64" onchange="updateTotal()" id="os7">Windows 8.1 Pro 64-BIT (+&pound;41.01)
      <br>
      <input type="radio" name="os" value="Win7Pro64" onchange="updateTotal()" id="os8">Windows 7 Pro 64-BIT (+&pound;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) (+&pound;12.99)</option>
      <option value="three">3 day signature upon delivery (3 working days) (+&pound;20.99)</option>
      <option value="overnight">Overnight signature upon delivery (1 working day) (+&pound;28.99)</option>
    </select>
    <div class="columns small-12 large-12">
      <p>Base Price: &pound;287.26</p>
      <p id="optionsPrice">Customizations: &pound;287.26</p>
      <p id="shippingPrice">Shipping Price: &pound;12.99</p>
      <p id="totalPrice">Total Price: &pound;300.25</p>
      <input type="submit" id="submit" value="Checkout">
    </div>
  </form>

答案 2 :(得分：1)

您的javascript代码中存在错误。这条线

var totalPrice = totalPrice.toFixed(2);

失败，因为totalPrice是一个字符串。您应该将代码的最后一部分更改为：

var optionsPrice = cpu + cooler + ram + mobo + drive + psu + chassis + os;
var optionsPriceString = optionsPrice.toFixed(2);
var shippingPriceString = shippingPrice.toFixed(2);
var totalPrice = optionsPrice + shippingPrice;
var totalPriceString = totalPrice.toFixed(2);

document.getElementById('optionsPrice').innerHTML = "Customizations: £" + optionsPriceString;
document.getElementById('shippingPrice').innerHTML = "Shipping: £" + shippingPriceString;
document.getElementById('totalPrice').innerHTML = "Total Price: £" + totalPriceString;}

在浏览器中查看开发人员控制台始终是个好主意。在大多数现代浏览器中，您可以通过按键盘上的f12键来完成此操作。

相关问题
最新问题