0
我正在设计一个在线汽车商店作为一个小练习的一部分。除了总价格之外，一切都很顺利。我希望将选择添加到运行总计中，具体取决于我选择的单选按钮和复选框，而不是每次进行选择时，该选择的值都累积到我的总数上。我希望我解释说，我会很感激任何人都可以给予的帮助！添加收音机和复选框总数？
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Configure Your GT Sports Car</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<header>
<h1>Configure your GT Super Sportscar</h1>
</header>
</div></div></div>
<form name="SportsCar" id="SportsCar">
<p>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-6">
<h3>Configuration</h3>
<input type="radio" name="format" id = "Manual" value="27790.00">
<label for = "Manual">GT Manual - €27,790.00</label>
<br>
<input type="radio" name="format" id = "Automatic" value="28590.00">
<label for = "Automatic">GT Automatic - €28,590.00</label>
<br>
<input type="radio" name="format" id = "Smanual" value="32455.00">
<label for = "Smanual">GT-S Manual - €32,455.00</label>
<br>
<input type="radio" name="format" id = "Sautomatic" value="33155.00">
<label for = "Sautomatic">GT-S Automatic - €33,155.00</label>
<br>
</div>
<div class="col-md-6">
<h3>Car Colours</h3>
<label for = "colour" >Please select a colour</label>
<select name="colour" id="colour">
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="silver">Silver</option>
<option value="white">White</option>
</select>
<img id="carImage" img src="images/black.jpg" alt="target_blank">
</div></div></div></div>
<div class="row">
<div class="col-md-12">
<h3>Factory Options</h3>
<input type="radio" name="fOptions" id="combo1" value="1235.00">
<label for="combo1">Option Combo 1 - €1,235.00</label>
<br>
(Power windows, Doors, Cruise Control)
<br>
<input type="radio" name="fOptions" id="combo2" value="3354.00">
<label for="combo2">Option Combo 2 - €3,354.00</label>
<br>
(Rear spoiler & Fog Lamps, Key-less Entry, Power Tilt & Slide Moonroof, Power windows, Doors, Cruise Control)
<br>
<input type="radio" name="fOptions" id="noExtras" value="0.00">
<label for="noExtras">No Extras - €0</label>
</div></div>
<br>
<div class="row">
<div class="col-md-12">
<h3>Dealer Options</h3>
<input type="checkbox" name="dealer" id="autochanger" value="550.00">
<label for = "auto-changer">CD Auto-Changer - €550.00</label>
<br>
<input type="checkbox" name="dealer" id="security" value="399.00">
<label for = "security">VIP Security System - €399.00</label>
<br>
<input type="checkbox" name="dealer" id="mirror" value="295.00">
<label for = "mirror">Auto Dimming Mirror - €295.00</label>
<br>
</div></div>
<div class="row">
<div class="col-md-12">
<br>
<label for="total" class="control-label col-md-2">Total Cost</label>
<input type="text" name="total" id="total" maxlength="3" readonly>
</div></div>
</p>
</form>
</div>
</body>
<script type="text/javascript">
var source = new Array();
window.addEventListener("load", preLoad, false);
function preLoad(){
source[0]="images/black.jpg";
source[1]="images/blue.jpg";
source[2]="images/red.jpg";
source[3]="images/silver.jpg";
source[4]="images/white.jpg";
}
carColour = document.getElementById("colour");
function handleColour(){
if(carColour.selectedIndex==0)
{
theImage.src=source[0];
}
else if(carColour.selectedIndex==1)
{
theImage.src=source[1];
}
else if(carColour.selectedIndex==2)
{
theImage.src=source[2];
}
else if(carColour.selectedIndex==3)
{
theImage.src=source[3];
}
else if(carColour.selectedIndex==4)
{
theImage.src=source[4];
}
}
theImage=document.getElementById("carImage");
carColour.addEventListener("click", handleColour, false);
</script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/calculate.js"></script>
</html>
的Javascript
function formatCurrency(num) {
num = num.toString().replace(/\€|\,/g,'');
if(isNaN(num))
{num = "0";}
sign = (num == (num = Math.abs(num)));
num = num.toFixed(2);
elements= num.split(".");
num = elements[0];
cents = elements[1];
for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
{num = num.substring(0,num.length-(4*i+3))+','+
num.substring(num.length-(4*0+3));}
return (((sign)?'':'-') + '€' + num + '.' + cents)
}
window.addEventListener("load", handleLoad, false);
function handleLoad(){
runningTotal=parseInt(document.getElementById("Manual").value);
document.getElementById("total").value=formatCurrency(runningTotal);
}
cars = document.getElementById("Manual");
cars.addEventListener("click", handleConfig, false);
function handleConfig(){
if(manual.checked){
runningTotal = parseInt(document.getElementById("manual").value);
document.getElementById("total").value=formatCurrency(runningTotal);
}
}
cars = document.getElementById("Automatic");
cars.addEventListener("click", handleConfigOne, false);
function handleConfigOne(){
if(Automatic.checked){
runningTotal = parseInt(document.getElementById("Automatic").value);
document.getElementById("total").value=formatCurrency(runningTotal);
}
}
cars = document.getElementById("Smanual");
cars.addEventListener("click", handleConfigTwo, false);
function handleConfigTwo(){
if(Smanual.checked){
runningTotal = parseInt(document.getElementById("Smanual").value);
document.getElementById("total").value=formatCurrency(runningTotal);
}
}
cars = document.getElementById("Sautomatic");
cars.addEventListener("click", handleConfigThree, false);
function handleConfigThree(){
if(Sautomatic.checked){
runningTotal = parseInt(document.getElementById("Sautomatic").value);
document.getElementById("total").value=formatCurrency(runningTotal);
}
}
var option = document.getElementById("combo1");
option.addEventListener("click", handleClick, false);
function handleClick(){
if(combo1.checked)
{
list=parseInt(document.getElementById("combo1").value);
runningTotal+=list;
document.getElementById("total").value=formatCurrency(runningTotal);
}
}
var factory = document.getElementById("combo2");
factory.addEventListener("click", handleExtrasTwo, false);
function handleExtrasTwo(){
if(combo2.checked)
{
list=parseInt(document.getElementById("combo2").value);
runningTotal+=list;
document.getElementById("total").value=formatCurrency(runningTotal);
}
}
var extras = document.getElementById("noExtras");
extras.addEventListener("click", handleNoExtras, false);
function handleNoExtras(){
if(noExtras.checked)
{
var noList=parseInt(document.getElementById("noExtras").value);
runningTotal += noList;
document.getElementById("total").value=formatCurrency(runningTotal);
}
}
var dealerOptions = document.getElementById("autochanger");
dealerOptions.addEventListener("click", handleOptions,false);
function handleOptions(){
if(autochanger.checked)
{
autoChange=parseInt(document.getElementById("autochanger").value);
runningTotal +=autoChange;
document.getElementById("total").value=formatCurrency(runningTotal);
}
}
var dealerOption = document.getElementById("security");
dealerOption.addEventListener("click", handleOptionsTwo,false);
function handleOptionsTwo(){
if(security.checked)
{
secure=parseInt(document.getElementById("security").value);
runningTotal+=secure;
document.getElementById("total").value=formatCurrency(runningTotal);
}
}
var dealerOptionThree = document.getElementById("mirror");
dealerOptionThree.addEventListener("click", handleOptionThree,false);
function handleOptionThree(){
if(mirror.checked)
{
mirror=parseInt(document.getElementById("mirror").value);
runningTotal += mirror;
document.getElementById("total").value=formatCurrency(runningTotal);
}
}
让我得到这个直...你不想总在每个点击增加，但展现在那个瞬间总的选定的价值，是吗？ – LcSalazar
目前每次点击一个选项时，它会将该值添加到总数中，但是当我选择另一个复选框或单选按钮时，它不会删除最后一个选择中添加的值，如果这有意义的话？ – user2988501