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>