3

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

3 回答 3

2

直接的问题是您没有使用该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.

于 2013-04-18T14:16:19.703 回答
1

您将值作为字符串（而不是数字），并且您没有使用“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)
}
于 2013-04-18T13:47:12.283 回答
0

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

}
于 2013-04-18T13:42:53.923 回答