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>

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

1 个答案: