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

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= 中仅当我单击计算按钮时才显示“总计”。我尝试了下面的 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