Question

我正在学习Javascript，而且我对这门语言还很新。在我的HTML代码中，我有两个列表。在第一个选择列表中，选择所需的产品在第二步中，您可以选择所需的产品数量。

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

获取产品值并将其分配给变量
获取产品的nr并将其分配给变量
将产品值乘以产品数
当用户点击提交时，会显示一个包含总计

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

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

所以你的第一个问题是你实际上没有获得元素的价值。您可以使用.value 获取来实现这一目标。

第二个问题是getElementsByName的结果是HTMLCollection（数组），因此您不能只使用.value。如果您确定只有一个具有此名称的元素，则只需使用[0]索引数组以获取找到的第一个元素。更容易做的是为元素提供id属性并使用document.getElementById - 它返回一个且只返回一个元素（不是数组）。我不想假设你能够这样做，所以我的代码仍然使用getElementsByName。

最后，乘法不需要对数字进行任何转换/解析。 *运算符会自动将值强制转换为数字，因此可以进行乘法运算。因此，由于它们最初是字符串，因此强制操作将完成（对于+运算符，不）。当然，如果任一操作数首先不是数字，则乘法的结果将为NaN。

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)
}

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)

}

计算Total Onclick Javascript

3 个答案: