计算总 Onclick Javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16084636/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Calculate Total Onclick Javascript
提问by Timothy Coetzee
I am learning Javascript and am still very new to the language. In my HTML code I have two lists. In the first select list you select the product you want In the second you select the amount of product you require.
我正在学习 Javascript 并且对这门语言仍然很陌生。在我的 HTML 代码中，我有两个列表。在第一个选择列表中，您选择您想要的产品 在第二个选择列表中，您选择您需要的产品数量。
I have attempted to write a javascript code which does the following:
我试图编写一个 javascript 代码，它执行以下操作：
- Get the product value and assign it to a variable
- Get the nr of product and assign it to a variable
- Multiply the product value with the number of product
- When the user clicks submit display an alert box with the total
- 获取产品值并将其分配给变量
- 获取产品的 nr 并将其分配给一个变量
- 将产品价值乘以产品数量
- 当用户点击提交时，会显示一个带有总数的警告框
However my code is not working when the user click the submit button I get the message NaN instead of the result of the total amount variable Please can you have a look at my code and tell me what am I doing wrong
但是，当用户单击提交按钮时，我的代码不起作用，我收到消息 NaN 而不是总金额变量的结果请您看看我的代码并告诉我我做错了什么
<script type="text/javascript">
function calc()
{
var total;
var fruitOrVeg;
var nrOfFruit;
course = document.getElementsByName("fruitOrVeg.course.value")
nrOfFruit = document.getElementsByName("nrOfFruit")
total = fruitOrVeg * nrOfFruit;
window.alert(total)
}
</script>
采纳答案by Dallas
You are taking the values as strings (rather than numbers), and you weren't using "fruitOrVeg". Also (noticed later/ new comments) you are using names when you should really use ID's for elements you want javascript to get data from directly and specifically, and then update your js accordingly. Try this:
您将值视为字符串（而不是数字），并且您没有使用“fruitOrVeg”。另外（稍后注意到/新评论）当您真正应该将 ID 用于希望 javascript 直接和具体地从中获取数据的元素时，您正在使用名称，然后相应地更新您的 js。试试这个：
function calc() {
var fruitOrVeg = Number(document.getElementsById("fruitOrVeg").value);
var nrOfFruit = Number(document.getElementsById("nrOfFruit").value);
var total = fruitOrVeg * nrOfFruit;
window.alert(total)
}
回答by Ian
The immediate problem was that you weren't using the fruitOrVegvariable. Other than that, the retrieval of the elements' values doesn't make sense in your code. Try this:
直接的问题是您没有使用该fruitOrVeg变量。除此之外，在您的代码中检索元素的值没有意义。试试这个：
function calc() {
var total,
fruitOrVeg,
nrOfFruit;
fruitOrVeg = document.getElementsByName("fruitOrVeg")[0].value;
nrOfFruit = document.getElementsByName("nrOfFruit")[0].value;
total = fruitOrVeg * nrOfFruit;
alert(total);
}
assuming your HTML is like:
假设你的 HTML 是这样的：
<select name="fruitOrVeg">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br />
<input type="text" name="nrOfFruit" />
<br />
<input type="button" id="submit_button" value="Submit" />
DEMO:http://jsfiddle.net/TNPCh/
演示：http : //jsfiddle.net/TNPCh/
So your first problem is that you weren't actually getting the elements' values. You do that by using .valueto getthem.
所以你的第一个问题是你实际上没有得到元素的值。您可以通过使用获取它们.value来做到这一点。
Second problem is that the result of getElementsByNameis an HTMLCollection(an array), so you can't just use .valueon it. If you're sure there's only one element with this name, just index the array with [0]to get the first one found. An easier thing to do is give the elements the idattribute and use document.getElementById- which returns one and only one element (not an array). I didn't want to assume you were able to do that, so my code still uses getElementsByName.
第二个问题是结果getElementsByName是一个HTMLCollection（一个数组），所以你不能只使用.value它。如果您确定只有一个具有此名称的元素，只需为数组建立索引[0]即可找到第一个元素。更简单的做法是为元素赋予id属性并使用document.getElementById——它返回一个且仅一个元素（不是数组）。我不想假设你能够做到这一点，所以我的代码仍然使用getElementsByName.
Finally, the multiplication doesn't need any conversion/parsing to a number. The *operator automatically coerces the values into numbers so the multiplication can occur. So since they are originally strings, the operation will complete because of this coercion (this is notthe case with the +operator). Of course, if either operand isn't a number in the first place, the multiplication's result will be NaN.
最后，乘法不需要任何转换/解析为数字。该*运营商将自动强制将这些值转换为数字，以便可以进行繁殖。所以由于它们原本是字符串，所以操作会因为这种强制而完成（操作符不是这种情况+）。当然，如果任一操作数一开始就不是数字，则乘法的结果将是NaN。
回答by PSR
try to use parseIntfor all the values.You did not have a value for fruitOrVeg.Try to declare with a value whatever you want
尝试使用parseInt所有的值。fruitOrVeg你没有一个值。尝试用任何你想要的值声明
function calc()
{
var total = 0;
var nrOfFruit = 0;
course = Number(document.getElementsByName("fruitOrVeg"));
nrOfFruit = Number(document.getElementsByName("nrOfFruit"));
total = fruitOrVeg * nrOfFruit;
window.alert(total)
}
