javascript在文本字段上顯示div上計算的總金額

Question

我正在根據用戶選擇的數量來計算總金額。 除了一件事，一切都在工作。 總數僅顯示在輸入字段上，例如。

<input id="total" type="text" readonly /> 

這是我的代碼。

<script type='text/javascript'>
function CalculateTotal() { 
    var qty = document.getElementById('Number').value;
    var price = 50; 
    var result = document.getElementById("total"); 
    result.value = price * qty;
}

總計為： <input id="total" type="text" readonly /> 。 這可行。

如何在<SPAN> or <DIV>上顯示總計。 我嘗試了這個<span id="total" class="total">0</span>但是它什么也沒做。 有人可以幫忙嗎？

Answer 1

您正在使用.value僅適用於表單字段。 如果使用.innerHTML ，則可以設置span或div的內容。

因此，您將擁有：

result.innerHTML = price * qty;

Answer 2

諸如<SPAN> or <DIV>類的元素沒有value屬性。 嘗試使用innerHTML

result.value = price * qty;

Answer 3

簡單的方法：

result.innerHTML = price * qty;

“更清潔”的方式（如果需要文本節點作為dom元素供您使用）

var text = result.childNodes[0];
if(text) {
    text.nodeValue = price * qty;
}
else {
    result.appendChild(document.createTextNode(price * qty));
}