- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试创建一个允许用户选择不同单选按钮的网站页面。每个不同的单选按钮代表一个产品选项。在这种情况下,我是用计算机组件完成的。因此,如果用户选择了与预先选中的单选按钮不同的单选按钮,那么我希望网页通过在“总价”上添加例如 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 (+£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>
最佳答案
您的代码中的问题可以通过现代浏览器的网络检查器来揭示,尤其是通过使用 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
。查看 JavaScript 的 parseFloat()
方法。
关于Javascript 根本无法与 HTML 页面一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31897551/
我想要的是能够在输入获得焦点或失去焦点时执行某些操作(两个事件)。 我尝试了以下方法,但这按事件单独工作(单独编码时):仅在焦点上,或仅在失去焦点时。 另外,我希望它尽可能跨平台(包括触摸设备),这是
我分别研究了TableView的Filtering和Pagination。 过滤: this帖子帮助我满足了我的需要 分页: this , this帖子也帮助了我 我想像这样将它们组合在一起: 详情-
我是 TDD 方法的新手,所以我想知道是否有人经历过这种机智可以启发我一点。我想获得一些关于如何一起使用 UML 和 TDD 方法的线索。 我已经习惯了:用 UML 设计 --> 生成骨架类(然后保持
我尝试使用入口点和 cmd 设置 Docker。 FROM debian:stretch RUN apt-get update && \ apt install gnupg ca-certificat
我想要一个 Class 对象,但我想强制它所代表的任何类扩展类 A 并实现接口(interface) B。 我能做到: Class 或者: Class 但我不能两者兼得。有办法做到这一点吗? 最佳答案
我是 Rubymine 的长期用户。 Rubymine 非常适合基于 html 的 Rails 应用程序,但我现在正在做更多的 SPA 客户端工作(例如 javascript/react)。我发现我真
我注意到我使用的某个脚本依赖于原型(prototype)。 (Lightbox 2) 它会与 jQuery 在同一页面上一起工作吗?有没有办法确保它们不冲突? 最佳答案 可以,但你需要采取 speci
我需要对表中显示的数据进行分页并通过 ajax 调用获取它 - 这是我通过使用具有以下配置的 dataTables 插件来完成的 - bServerSide : true; sAjaxSource :
我是 gtk 新手,所以想知道在 C 语言中归档和 gtk 是否可以一起使用?例如,我可以从 .txt 文件中读取,然后在相同的代码中使用 gtk 在标签或其他内容中显示它吗?如果是,怎么办? 谢谢!
有没有人设法得到Bck2Brwsr最近与 Java 8/JavaFX 8 一起工作?有没有兼容的机会?我找不到太多关于它的信息,也没有一个好的起点。使用给定的 Maven archetype我遇到了几
在我的应用程序中,用户通过 openid(与 stackoverflow 相同)登录/注销。 我想通过 oauth 向第三方应用程序开放我的应用程序。 如何创建我的 openid-consumer 应
我在启动和运行 Hibernate 和 Spring 时遇到一些问题。我有一个网络服务器项目,它使用了其他几个具有持久实体的项目。我遇到的问题是,对于存储在 WEB-INF/libs 内的另一个 ja
我有 @ControllerAdvice 类,它处理一组异常。我们还有一些其他异常,这些异常用 @ResponseStatus 注释进行注释。为了结合这两种方法,我们使用博客文章中描述的技术:http
我想在屏幕上使用进度条而不是 progressDialog。 我在我的 XML View 文件中插入了一个进度条,我想让它在加载时显示并在不加载时禁用它。 所以我使用的是可见的,但它发生了,所以其余的
CREATE TABLE `users` ( `id` int(11) AUTO_INCREMENT, `academicdegree` varchar(255),
IN() 中使用的查询返回:1, 2。然而,整个查询返回 0 行,这是不可能的,因为它们存在。我在这里做错了什么? SELECT DISTINCT li.auto_id FROM links
亲们, 我如何在使用 Jade 生成的表单上实现 jQuery 样式?我想做的是美化 表单并使它们可点击。我在 UI 方面很糟糕。期间。 我如何在表单上实现这个可选择的方法? http://jquer
按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我可以: auto o1 = new Content; 但不能: std::shared_ptr o1(new Content); std::unique_ptr o1(new Content); 我
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 4 年前。 Improve this qu
我是一名优秀的程序员,十分优秀!