计算总 Onclick Javascript

我正在学习 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>

直接的问题是你没有使用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" />

DEMO: http://jsfiddle.net/TNPCh/ http://jsfiddle.net/TNPCh/

所以你的第一个问题是你实际上没有获得元素的值。你可以通过使用来做到这一点.value to get them.

第二个问题是，结果getElementsByName is an HTMLCollection（一个数组），所以你不能只使用.value在上面。如果您确定只有一个元素具有该名称，只需使用以下命令对数组进行索引[0]找到第一个。更容易做的事情是给元素id属性和用途document.getElementById- 它返回一个且仅一个元素（不是数组）。我不想假设你能够做到这一点，所以我的代码仍然使用getElementsByName.

最后，乘法不需要对数字进行任何转换/解析。这*运算符自动将值强制转换为数字，以便可以进行乘法。因此，由于它们最初是字符串，因此操作将由于这种强制而完成（这是not案件与+操作员）。当然，如果任一操作数一开始就不是数字，则乘法的结果将是NaN.