[英]Need help displaying calculations from a form using Javascript
我創建了一個簡單的網站,詢問用戶他們想要的襯衫的類型以及什么顏色。 每個選擇都有一個值。 我希望顯示用戶選擇的總費用。 到目前為止,實施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>
更簡單的方法。
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>
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.