使用JavaScript进行表单计算_Javascript_Html_Forms_Frontend

使用JavaScript进行表单计算

javascript html forms

使用JavaScript进行表单计算,javascript,html,forms,frontend,Javascript,Html,Forms,Frontend,我编写了一个简单的表单，使用JavaScript按大小、形状、颜色和数量计算价格。问题是当我添加值时，它们不会显示。当我只得到第一个选择框的总数时，它就会显示出来。但不是当我试图把总数加起来时，数量似乎根本不起作用。我尝试了许多不同的代码变体，但似乎无法使其正常工作这是表单的HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict

我编写了一个简单的表单，使用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>

我做错了什么

！！！！更新

好的，我有一个打字错误，所以我得到了表格来计算选择框的价格，但仍然没有数量。如果可能的话，我真的需要在用户键入时动态地更新（不需要按钮或按enter键）

你需要缩小/细分这个问题

1）尝试自己获取第一个选择框的值（您已经这样做了）

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

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

4）最后，尝试所有三种方法

只要不断地分解问题，直到你把它缩小

干杯

你需要缩小/细分这个问题

1）尝试自己获取第一个选择框的值（您已经这样做了）

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

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

4）最后，尝试所有三种方法

只要不断地分解问题，直到你把它缩小

干杯

几点评论：

尽管大多数浏览器会在默认情况下选择select元素的第一个选项，但有些浏览器可能不会。因此，始终为默认选项指定所选属性

通过使用“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
 };

颜色“数组”也是如此

[……]

如果不打算使用指定的值，则不要指定。稍后将赋值，因此只需声明变量：

 var sizePrice;

在getQuantity函数中：

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

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

您确实应该检查输入值，因为它可能是垃圾，或者检查返回值，因为它可能是NaN（因为输入是垃圾）。在输入09的情况下，您应该始终包含一个带parseInt的基数：

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

在getTotal函数中：

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

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

数量包括在哪里

编辑我不知道你哪里出了问题，使用以下方法：

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

我得到了正确的值。您需要检查数量输入值，并将答案的格式正确设置为小数点后两位。

一些注释：

尽管大多数浏览器会在默认情况下选择select元素的第一个选项，但有些浏览器可能不会。因此，始终为默认选项指定所选属性

通过使用“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
 };

颜色“数组”也是如此

[……]

如果不打算使用指定的值，则不要指定。稍后将赋值，因此只需声明变量：

 var sizePrice;

在getQuantity函数中：

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

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

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

在getTotal函数中：

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

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

数量包括在哪里

编辑我不知道你哪里出了问题，使用以下方法：

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

我得到了正确的值。您需要检查数量输入值，并将答案的格式正确设置为小数点后两位。

正是我所做的，我发现了选择框的问题，它工作正常。但我还是无法得到数量来显示。当我用*getQuantity在数量中计时并按enter键时，我可以看到计算结果在瞬间显示，但它消失了。我希望能够做到这一点，而不必点击回车键或使用提交按钮，但如果我不能做到，我会选择一个我也尝试过但没有运气的按钮。当你点击回车键时，表单会自动提交，这将加载一个新页面。在标签的形式中，addonsubmit=“return false”。至于在输入框中使用onkeyup查找时看到的更改，onkeyup非常有效。但我还是不能把总价乘以数量。下面是我添加的内容，但它不起作用：var instantPrice=getSizePrice（）+getShapePrice（）+getColorPrice（）*getQuantity（）；你需要更具体一些。它不起作用可能意味着很多不同的事情。它是抛出错误，还是计算错误的数字？我可以从选择框中获得正确的值，但当我尝试按数量乘以它们时（如我上一条评论中所述），所有结果都返回空白。只有当我添加getQuantity函数时，它才会这样做。当我用这个+getQuantity（）来添加数量时，它就起作用了，但当我用这个*Int来乘以它时，它就不起作用了。我用这个+来添加，这正是我所做的，我发现了选择框的问题，它就正常工作了。但我还是无法得到数量来显示。当我用*getQuantity在数量中计时并按enter键时，我可以看到计算结果在瞬间显示，但它消失了。我希望能够做到这一点，而不必点击回车键或使用提交按钮，但如果我不能做到，我会选择一个我也尝试过但没有运气的按钮。当你点击回车键时，表单会自动提交，这将加载一个新页面。在标签的形式中，addonsubmit=“return false”。至于在输入框中使用onkeyup查找时看到的更改，onkeyup非常有效。B