我创建了一个简单的网站，询问用户他们想要的衬衫类型以及颜色。每个选择都有一个值。我希望显示用户选择的总成本。到目前为止，实现Javascript一直给我带来麻烦。
这是我的html代码以及我尝试过的Javascript
function calculatePrice() {
//get data
var blank = document.getElementById("blank");
var long = document.getElementById("long");
var sweater = document.getElementById("sweater");
var graphic = document.getElementById("graphic");
var colorSelect = document.getElementById("colorSelect");
var color = colorSelect.options[colorSelect.SelectedInex].value;
//convert to integers
blank = parseInt(shirt);
long = parseInt(shirt);
sweater = parseInt(shirt);
graphic = parseInt(shirt);
color = parseInt(color);
//calculate
var total = shirt + color;
//display total
document.getElementById("displayTotal").value = total;
}<div class="form">
<form id="clothingForm">
<fieldset>
<legend>Select items to order.</legend>
<div class="shirt">
<label class="shirtLabel">Shirts</label>
<p><br/>
<input type="radio" name="selectedShirt" id="blank" value="B2" onclick="calculatePrice()" />
<label class="sLabel" for="blank">Blank Tee - $2</label>
<p><br/>
<input type="radio" name="selectedShirt" id="long" value="5" onclick="calculatePrice()" />
<label class="sLabel" for="long">Longsleeve - $5</label>
<p><br/>
<input type="radio" name="selectedShirt" id="sweater" value="7" onclick="calculatePrice()" />
<label class="sLabel" for="sweater">Sweater - $7</label>
<p><br/>
<input type="radio" name="selectedShirt" id="graphic" value="12" onclick="calculatePrice()" />
<label class="sLabel" for="graphic">Graphic Tee - $12</label>
</div>
<div class="color">
<label class="colorLabel" for="color">Color</label>
<select id="colorSelect" name="color" onchange="calculatePrice()">
<option value="0" id="color">Select Color</option>
<option value="1" id="color">White + ($1)</option>
<option value="1" id="color">Black + ($1)</option>
<option value="2" id="color">Blue + ($2)</option>
<option value="2" id="color">Yellow + ($2)</option>
<option value="2" id="color">Red + ($2)</option>
<option value="2" id="color">Pink + ($2)</option>
<option value="4" id="color">Tie Dye + ($4)</option>
</select>
</div>
<button type="button" onclick="calculatePrice()">Your Total</button>
<input type="text" id="displayTotal" size=8>
</fieldset>
</form>
</div>
答案 0 :(得分：0)
更简单的方法。
function calculatePrice(element) {
if(!this.total) {
this.total = 0;
}
this.total += parseInt(element.value);
document.getElementById("displayTotal").value = this.total;
}<div class="form">
<form id="clothingForm">
<fieldset>
<legend>Select items to order.</legend>
<div class="shirt">
<label class="shirtLabel">Shirts</label><p><br/>
<input type="radio" value="2" onclick="calculatePrice(this)"/>
<label class="sLabel" for="blank">Blank Tee - $2</label><p><br/>
<input type="radio" value="5" onclick="calculatePrice(this)"/>
<label class="sLabel" for="long">Longsleeve - $5</label><p><br/>
<input type="radio" value="7" onclick="calculatePrice(this)"/>
<label class="sLabel" for="sweater">Sweater - $7</label><p><br/>
<input type="radio" value="12" onclick="calculatePrice(this)"/>
<label class="sLabel" for="graphic">Graphic Tee - $12</label>
</div>
<div class="color">
<label class="colorLabel" for="color">Color</label>
<select name="color" onchange="calculatePrice(this)">
<option value="0" id="color">Select Color</option>
<option value="1" id="color">White + ($1)</option>
<option value="1" id="color">Black + ($1)</option>
<option value="2" id="color">Blue + ($2)</option>
<option value="2" id="color">Yellow + ($2)</option>
<option value="2" id="color">Red + ($2)</option>
<option value="2" id="color">Pink + ($2)</option>
<option value="4" id="color">Tie Dye + ($4)</option>
</select>
</div>
<input type="text" id="displayTotal" size="8">
</fieldset>
</form>
</div>
答案 1 :(得分：0)
使用HTML页面内的脚本运行代码。
<html>
<head><title></title></head>
<body>
<div class="form">
<form id="clothingForm">
<fieldset>
<legend>Select items to order.</legend>
<div class="shirt">
<label class="shirtLabel">Shirts</label>
<p><br/>
<input type="radio" name="selectedShirt" id="blank" value="2" />
<label class="sLabel" for="blank">Blank Tee - $2</label>
<p><br/>
<input type="radio" name="selectedShirt" id="long" value="5" />
<label class="sLabel" for="long">Longsleeve - $5</label>
<p><br/>
<input type="radio" name="selectedShirt" id="sweater" value="7" />
<label class="sLabel" for="sweater">Sweater - $7</label>
<p><br/>
<input type="radio" name="selectedShirt" id="graphic" value="12" />
<label class="sLabel" for="graphic">Graphic Tee - $12</label>
</div>
<div class="color">
<label class="colorLabel" for="color">Color</label>
<select id="color" name="color" onchange="calculatePrice()">
<option value="0" >Select Color</option>
<option value="1" >White + ($1)</option>
<option value="1" >Black + ($1)</option>
<option value="2" >Blue + ($2)</option>
<option value="2" >Yellow + ($2)</option>
<option value="2" >Red + ($2)</option>
<option value="2" >Pink + ($2)</option>
<option value="4" >Tie Dye + ($4)</option>
</select>
</div>
<button type="button" onclick="calculatePrice()">Your Total</button>
<input type="text" id="displayTotal" size=8>
</fieldset>
</form>
</div>
</body>
<script>
function calculatePrice() {
console.log("blankchecked", document.getElementById("blank").checked)
console.log("long", document.getElementById("long").checked)
console.log("sweater", document.getElementById("sweater").checked)
console.log("graphic", document.getElementById("graphic").checked)
//get data
if(document.getElementById("blank").checked){
var blank = document.getElementById("blank").value;
shirt = parseInt(blank);
}
if(document.getElementById("long").checked){
var long = document.getElementById("long").value;
shirt = parseInt(long);
}
if(document.getElementById("sweater").checked){
var sweater = document.getElementById("sweater").value;
shirt = parseInt(sweater);
}
if(document.getElementById("graphic").checked){
var graphic = document.getElementById("graphic").value;
shirt = parseInt(graphic);
}
var selectedcolor = document.getElementById("color").value;
color = parseInt(selectedcolor);
//calculate
var total = shirt + color;
//display total
document.getElementById("displayTotal").value= total;
}
</script>
</html>