点击时计算总数Javascript

Question

我正在学习JavaScript，对这门语言还很陌生。 在我的HTML代码中，有两个列表。 在第一个下拉列表中，您选择所需的产品。 在第二个下拉列表中，您选择所需产品的数量。

我尝试编写了以下JavaScript代码：

• 获取产品价值并将其分配给变量
• 获取产品数量并将其分配给变量
• 将产品价值乘以产品数量
• 当用户单击提交时，显示一个带有总计的警告框

然而，当用户单击提交按钮时，我的代码不起作用，我得到的信息是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>

- Timothy Coetzee

---

使用eval函数。eval()函数评估或执行一个参数。 - happybuddha

不要使用 eval。Eval 很糟糕。 - Colin DeClue

你能展示一下你的HTML吗？ - Colin DeClue

Answer 1

直接问题是您没有使用fruitOrVeg变量。除此之外，您的代码中检索元素值的方式不合理。尝试这样做：

function calc() {
   var total,
       fruitOrVeg,
       nrOfFruit;

   fruitOrVeg = document.getElementsByName("fruitOrVeg")[0].value;
   nrOfFruit = document.getElementsByName("nrOfFruit")[0].value;

   total = fruitOrVeg * nrOfFruit;

   alert(total);
}

假设您的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" />

演示: http://jsfiddle.net/TNPCh/

首先，你的问题在于你没有真正获取元素的值。你可以使用 .value 来获取它们的值。

其次，getElementsByName 的结果是一个 HTMLCollection（一个数组），所以你不能直接在其上使用 .value。如果你确定只有一个带有这个名称的元素，请使用数组索引 [0] 获取第一个找到的元素。更简单的方法是给元素添加 id 属性并使用 document.getElementById - 它返回一个且仅返回一个元素（而不是数组）。我不想假设你能够做到这一点，所以我的代码仍然使用了 getElementsByName。

最后，乘法不需要将任何内容转换/解析为数字。乘号 * 自动将值强制转换为数字，因此可以进行乘法运算。因此，由于它们最初是字符串，所以操作将完成，因为这种强制转换（使用加号 + 操作符则不是这种情况）。当然，如果其中一个操作数本来就不是数字，则乘法的结果将是 NaN。

- Ian

Answer 2

您正在将值作为字符串（而不是数字）进行处理，并且没有使用“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)
}

- Smern

---

@TimothyCoetzee 不是在 JavaScript 中... 变量类型将由传递给它的值确定。 - Smern

这个答案是如何工作的？document.getElementsByName返回一个数组。你不能将数组相乘。而且它们是字符串也无所谓。当你使用*运算符时，值被强制转换为数字，以便完成操作。 - Ian

其实，我甚至都没注意到这个……最好给你想要获取值的每个元素加上ID。然后通过ID来获取值，如果使用jQuery，你可以这样做：$("#nrOfFruit").val();；或者使用普通的JavaScript，document.getElementById('nrOfFruit').value;。 - Smern

@smerny：我认为通常会更喜欢使用parseInt（...，10）而不是new Number（...）。 - Cᴏʀʏ

@Cory 嗯，他们不使用 new，这有点不同。而且，该数字可能最好是一个没有小数的整数，但使用 Number() 或 + 运算符通常会尝试将值转换为数字。parseFloat 和 parseInt 有解析它们作为浮点数或整数的意图。 - Ian

Answer 3

尝试使用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)

}

- PSR

---

如果它们不是整数值，则返回转换为浮点数的值，或者使用parseFloat函数。 - martincarlin87

我认为水果的数量表示为整数。 - PSR

你需要声明一个名为fruitOrVeg的变量，并赋予它一个值。 - PSR

哎呀，那是个打错字了，应该是fruitOrVeg而不是course。我在文本编辑器里是这么写的，只是在打问题时不小心改错了。 - Timothy Coetzee