[英]Issues with Javascript Price Calculator - Price Not Showing
我在制作一個簡單的價格計算器時遇到問題。 我已經學習過Javascript,並且遍歷了所有內容,而且看起來還不錯,但是由於最終價格沒有出現,我肯定會缺少一些東西。 我已經檢查了幾次,但也許它需要新的眼光:
<form action="" name="costcalculator" id="costcalculator" onsubmit="return false;"> // I put name and ID to be safe
<b>1.</b> What type of website do you need?<br>
<input type="radio" name="typesite" value="Standard" onclick="calculateTotal()" />
A standard website<br>
<input type="radio" name="typesite" value="Full Blog" onclick="calculateTotal()" />
A website that allows visitors to leave comments on blog posts<br>
<center><input type='submit' id='submit' value='Submit' onclick="calculateTotal()" /></center><p>
<div id="totalPrice"></div> </form>
劇本:
var typesite = new Array(); // typesite is taken from the HTML
typesite["Standard"]=20;
typesite["Full Blog"]=30;
function getLayoutPrice() // new name for function
{
var layoutPrice=0; // new name for the variable
var theForm = document.forms["costcalculator"]; // comes from form name/ID
var typeSite = theForm.elements["typesite"]; // new variable name and name from HTML
for(var i = 0; i < typeSite.length; i++)
{
if(typeSite[i].checked)
{
layoutPrice = typesite[typeSite[i].value];
break;
}
}
return layoutPrice; // taken from the variable created earlier
}
function calculateTotal()
{
var totalPrice = getLayoutPrice();
var divobj = document.getElementById('totalPrice');
divobj.style.display='block';
divobj.innerHTML = "Total Price would be about $"+totalPrice;
}
function hideTotal()
{
var divobj = document.getElementById('totalPrice');
divobj.style.display='none';
}
在當前的Chrome和Firefox中進行了測試,並且似乎可以正常運行,從下面的代碼段可以看出。
var typesite = new Array(); // typesite is taken from the HTML typesite["Standard"]=20; typesite["Full Blog"]=30; function getLayoutPrice() // new name for function { var layoutPrice=0; // new name for the variable var theForm = document.forms["costcalculator"]; // comes from form name/ID var typeSite = theForm.elements["typesite"]; // new variable name and name from HTML for(var i = 0; i < typeSite.length; i++) { if(typeSite[i].checked) { layoutPrice = typesite[typeSite[i].value]; break; } } return layoutPrice; // taken from the variable created earlier } function calculateTotal() { var totalPrice = getLayoutPrice(); var divobj = document.getElementById('totalPrice'); divobj.style.display='block'; divobj.innerHTML = "Total Price would be about $"+totalPrice; } function hideTotal() { var divobj = document.getElementById('totalPrice'); divobj.style.display='none'; }
<form action="" name="costcalculator" id="costcalculator" onsubmit="return false;"> // I put name and ID to be safe <b>1.</b> What type of website do you need?<br> <input type="radio" name="typesite" value="Standard" onclick="calculateTotal()" /> A standard website<br> <input type="radio" name="typesite" value="Full Blog" onclick="calculateTotal()" /> A website that allows visitors to leave comments on blog posts<br> <center><input type='submit' id='submit' value='Submit' onclick="calculateTotal()" /></center><p> <div id="totalPrice"></div> </form>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.