Question

<input type="number" name="quantity" id="quantity">
<span id="price">4000</span>

<input type="text" value="" id="total" readonly>
<input type="button" value="calculate Total Price" onClick="calculate()">

我需要上面的字段name="quantity"和id="price"中的值，并使用javascript函数进行计算，并且仅当我单击计算按钮时才会在字段id="total"中显示它。我尝试了下面的javascript函数，但结果显示为NaN。

function calculate(tot) {
        var quan = document.getElementsByName('quantity').value;
        var pri = document.getElementById('price');
        var pr = parseInt(pri);
        var tot = quan * pr;
        document.getElementById("total").value = tot;
}

Answer 1

每当你看到一个复数形式的方法时，例如getElementsByName它会得到多个元素，或者我们称之为nodeList，即使只有一个匹配元素，你仍然得到一个nodeList，一个nodeList没有值，你可以像数组一样访问nodeList并获取列表中的第一个元素，如：

var quan = document.getElementsByName('quantity')[0].value;

此外，getElementById获取元素，而非数字，您必须获取innerHTML

var pri = document.getElementById('price').innerHTML;

并记住parseInt

的基数

parseInt(pri, 10)

当你正在乘以

时，并不是真的需要解析它

FIDDLE

Answer 2

您将需要for循环并迭代每个单独的值并将其放入值中。像这样：

for(i=0; i<quan.length; i++) {

 var total+= quan[i];
}

使用输入和跨度字段进行Javascript计算

2 个答案: