Question

我编写了一个简单的表单，使用JavaScript按大小，形状，颜色和数量计算价格。问题是当我添加它们不会显示的值时。当我只得到它显示的第一个选择框的总数时。但不是我试图添加总数而且数量似乎根本不起作用。我尝试了许多不同的代码变体，但似乎无法让它工作。

以下是表单的HTML。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Price Qoute</title>
  <script type="text/javascript" src="formCalc.js">
  </script>
</head>

<body onload='hideTotal()'>
 <form action="" id="price-quote">
  <select id="size" name="size" onchange="getTotal()">
    <option value="None">Select Size</option>
    <option value="2.5 inches">2.5 inches</option>
    <option value="3 inches">3 inches</option>
  </select>

<select id="shape" name="shape" onchange="getTotal()">
    <option value="None">Select Shape</option>
    <option value="Round">Round</option>
    <option value="Oval">Oval</option>
</select>

<select id="color" name="color" onchange="getTotal()">
   <option value="None">Select Color</option>
   <option value="One Color">One Color</option>
   <option value="Full Color">Full Color</option>
</select>

<label>Quantity</label><input type="text"  name="quantity" id="quantity"          onchange="getTotal()" />

</form>
<div id="totalPrice"></div>
</body>
</html>

这是JavaScript

var size_prices= new Array();
size_prices["None"]=0;
size_prices["2.5 inches"]=.10;
size_prices["3 inches"]=.20;

function getSizePrice()
{
    var sizePrice=0;
    var theForm = document.forms["price-quote"];
    var selectedSize = theForm.elements["size"];
    sizePrice = size_prices[selectedSize.value];
    return sizePrice;
}

var shape_prices= new Array();
shape_prices["None"]=0;
shape_prices["Round"]=.10;
shape_prices["Oval"]=.20;

function getShapePrice()
{
    var shapePrice=0;
    var theForm = document.forms["price-quote"];
    var selectedShape = theForm.elements["shape"]; 
    shapePrice = shape_prices[selectedShape.value];
    return shapePrice;
}

var color_prices= new Array();
color_prices["None"]=0;
color_prices["One Color"]=1;
color_prices["Full Color"]=3;

function getColorPrice()
{
    var colorPrice=0;
    var theForm = document.forms["price-quote"];
    var selectedColor = theForm.elements["color"];
    colorPrice = color_prices[selectedColor.value];
    return colorPrice;
}

function getQuantity()
{
    var theForm = document.forms["price-quote"];
    //Get a reference to the TextBox
    var quantity = theForm.elements["quantity"];
    var howmany =0;
    //If the textbox is not blank
    if(quantity.value!="")
    {
        howmany = parseInt(quantity.value);
    }
    return howmany;
}

function getTotal()
{
    //Here we get the total price by calling our function
    //Each function returns a number so by calling them we add the values they return           together
    var instantPrice = getSizePrice() + getShapePrice() + getColorPrice(); 
    //display the result
    document.getElementById('totalPrice').innerHTML =
                                  "$"+instantPrice;
}

我做错了什么？

!!!!更新!!!!

好的，我有一个错字，所以我得到了表格来计算选择框的价格，但仍然没有继续数量。我真的需要动态地根据用户类型（没有按钮或点击输入）动态更新，如果可能的话。

Answer 1

您需要缩小/分解问题。

1）尝试自己获取第一个选择框的值（你已经完成了）

2）尝试自己获取第二个选择框的值。

3）尝试自己获取第三个选择框的值。

4）最后尝试所有三个。

只要不断解决问题，请将其缩小范围。

干杯

Answer 2

一些评论：

即使大多数浏览器会默认选择选择元素的第一个选项，但有些浏览器可能不会。所以总是给默认选项选择属性。

您可以通过选项值“2.5”而不是“2.5英寸”来使事情变得更容易。

在您的代码中：

> var size_prices= new Array();
>  size_prices["None"]=0;
>  size_prices["2.5 inches"]=.10;
>  size_prices["3 inches"]=.20;

这里使用的是像对象一样的数组。最好为工作使用正确的工具，因此请使用对象：

 var size_prices= { 
      'None': 0,
      '2.5 inches': 0.10,
      '3 inches': 0.20
 };

color_prices“array”也是如此。

[...]

>     var sizePrice=0;

如果您不打算使用指定的值，请不要指定一个值。您稍后分配一个值，因此只需声明变量：

 var sizePrice;

在 getQuantity 函数中：

> if(quantity.value!="") {
>      howmany = parseInt(quantity.value);
>  }
>  return howmany;

你真的应该检查输入值，因为它可能是垃圾，或者返回值，因为它可能是NaN（因为输入是垃圾）。如果输入09，你应该总是包含一个基数和parseInt：

alert(parseInt('09')); // 0
alert(parseInt('09', 10)); // 9

在 getTotal 函数中：

> var instantPrice = getSizePrice() + getShapePrice() + getColorPrice();

数量包含在哪里？

修改

我不知道你哪里出错了，使用以下内容：

 var instantPrice = (getSizePrice() + getShapePrice() +
                      getColorPrice()) * getQuantity();

我得到的似乎是正确的值。您需要检查数量的值输入，并将答案格式化为正确的两位小数。

使用JavaScript进行表单计算

2 个答案:

修改