Javascript价格计算器的问题 - 价格不显示

Question

我遇到了一个简单的价格计算器问题。我已经学会了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'; 
} 

Answer 1

经测试，在当前的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>