Javascript 下拉表单数学计算
我正在尝试创建一个页面，其中有两个下拉菜单，然后当用户按下提交时，它会根据下拉菜单中给出的数据计算价格。它需要从第一个下拉菜单选项中获取 1 或 2，将其乘以第二个下拉菜单选项的值，再乘以 0.2，然后在用户按下提交时输出它。我尝试让它工作，但我不断收到 NaN 错误。有什么帮助吗？
<head>
<script type="text/javascript">
function price() {
var sqBn = document.priceCalc.squareOrBanner;
var Amt = document.priceCalc.number;
var price = sqBn * Amt * 0.2;
document.write(price);
}
</script>
<form name="priceCalc" action="priceCalcPage.html" onsubmit="document.write(price())">
<div align="center">
<select name="squareOrBanner">
<option value="1">Square</option>
<option value="2">Banner</option>
</select>
<select name="number">
<option value="250">250</option>
<option value="500">500</option>
<option value="750">750</option>
<option value="1000">1000</option>
</select>
<br><input type="submit" value="Figure out pricing!"><br>
</div>
</form>
I'm trying to create a page where there are two dropdown menus, and then when the user presses submit, it calculates a price based on the data given from the dropdown menu. It needs to take either 1 or 2 from the first dropdown menu choice, multiply that by the value of the second dropdown menu choice, multiply that by 0.2, and output it when the user presses submit. I've tried to make it work but I keep getting NaN errors. Any help?
<head>
<script type="text/javascript">
function price() {
var sqBn = document.priceCalc.squareOrBanner;
var Amt = document.priceCalc.number;
var price = sqBn * Amt * 0.2;
document.write(price);
}
</script>
<form name="priceCalc" action="priceCalcPage.html" onsubmit="document.write(price())">
<div align="center">
<select name="squareOrBanner">
<option value="1">Square</option>
<option value="2">Banner</option>
</select>
<select name="number">
<option value="250">250</option>
<option value="500">500</option>
<option value="750">750</option>
<option value="1000">1000</option>
</select>
<br><input type="submit" value="Figure out pricing!"><br>
</div>
</form>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
也许您正在寻找这样的东西：
http://jsfiddle.net/JSvSn/1/
您需要访问这些对象中的
value属性：编辑：这是一个用价格更新输入框值的版本：http://jsfiddle.net/JSvSn/5/
编辑2： 在 div 中显示价格。
Maybe you are looking for something like this:
http://jsfiddle.net/JSvSn/1/
You need to access the
valueproperty in those objects:EDIT: Here's a version that updates the value of an input box with the price: http://jsfiddle.net/JSvSn/5/
EDIT 2: Show price in a div.
我不确定
sqBn.value是否适用于所有浏览器。使用起来会更安全，如果您仍然得到 NaN 结果，请尝试
如果您想在不刷新页面的情况下进行此计算，请更改表单声明，如下所示：
这样，将执行 onsubmit，但不会向的行动。如果您想提交，您仍然可以通过 javascript (
document.priceCalc.submit()) 进行提交。I'm not sure if the
sqBn.valuewill work on all browsers. It would be safer to useand if you are still getting NaN results then try
If you want to do this calculation without refreshing the page change the form declaration like this:
In this way the onsubmit will be executed, but won't submit anything to the action. If you want to submit it, you can still do it from javascript (
document.priceCalc.submit()).