javascript - 计算总点击 Javascript

Question

我正在学习 Javascript，但对这门语言还是很陌生。在我的 HTML 代码中，我有两个列表。在第一个选择列表中选择您想要的产品在第二个选项中，您可以选择所需的产品数量。

我试图编写一个执行以下操作的 javascript 代码:

• 获取产品值(value)并将其分配给变量
• 获取产品的编号并将其分配给一个变量
• 将产品值(value)乘以产品数量
• 当用户点击提交时显示一个带有总数的警告框

但是，当用户单击提交按钮时，我的代码无法正常工作，我收到消息 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>

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。