簡單的JavaScript添加問題

Question

我對JS不太好，因爲某些原因，當我嘗試將兩個字段一起添加時，它將它們連接在一起，而不是將總和加在一起..這是我試圖使用的代碼..

function calculateTotal() { 

     var postageVal = document.getElementById('postage').value; //$68.50 
     var subtotalVal = document.getElementById('subtotal').value; //$378.00 

     var postage = postageVal.substr(1); //68.50 
     var subtotal = subtotalVal.substr(1); //378.00 
     var totalVal = postage+subtotal; 

     alert(postage); 
     alert(subtotal); 
     alert(totalVal); 

    }; 

的totalVal是呼應/告警出68.50378.00，而不是增加他們在一起..可能有人請告訴我，我已經錯了嗎？ :(這個想法是用totalVal更新「total」文本字段，但我還沒有得到那麼遠！

Answer 1

你需要加入他們之前你的價值觀轉換成浮動：

var totalVal = parseFloat(postage) + parseFloat(subtotal); 

編輯：這是一個包含楠檢查一個完整的例子：

function calculateTotal() { 

    var postageVal = document.getElementById('postage').value; //$68.50 
    var subtotalVal = document.getElementById('subtotal').value; //$378.00 

    var postage = parseFloat(postageVal.substr(1)); //68.50 
    var subtotal = parseFloat(subtotalVal.substr(1)); //378.00 
    var postageAsFloat = isNaN(postage) ? 0.0 : postage; 
    var subtotalAsFloat = isNaN(subtotal) ? 0.0 : subtotal; 
    var totalVal = postageAsFloat + subtotalAsFloat; 

    alert(postage); 
    alert(subtotal); 
    alert(totalVal); 

}; 

Answer 2

我沒有測試過你的代碼，所以可能有其他問題，但下面使用parseFloat的修復應該停止拼接和數字加在一起

function calculateTotal() { 

    var postageVal = document.getElementById('postage').value; //$68.50 
    var subtotalVal = document.getElementById('subtotal').value; //$378.00 

    var postage = postageVal.substr(1); //68.50 
    var subtotal = subtotalVal.substr(1); //378.00 
    var totalVal = parseFloat(postage)+parseFloat(subtotal); 

    alert(postage); 
    alert(subtotal); 
    alert(totalVal); 

}; 

Answer 3

parseFloat的伎倆

var postage = parseFloat(postageVal.substr(1)); 
var subtotal = parseFloat(subtotalVal.substr(1)); 

Answer 4

嘗試轉換號碼花車：。

function calculateTotal() { 

    var postageVal = document.getElementById('postage').value; //$68.50 
    var subtotalVal = document.getElementById('subtotal').value; //$378.00 

    var postage = parseFloat(postageVal.substr(1)); //68.50 
    var subtotal = parseFloat(subtotalVal.substr(1)); //378.00 
    var totalVal = postage+subtotal; 

    alert(postage); 
    alert(subtotal); 
    alert(totalVal); 

}; 

Answer 5

它將郵資和小計視爲字符串並將其連接起來。你可以嘗試這樣的：

var totalVal = 0+postage+subtotal; 

這應該強制它進入數字模式。

但是，如果值最終不是數字，這可能會導致問題。您應該通過適當的數字解析函數來運行它，並添加檢查以確保它們正確解析，否則您將以NaN結束。

Answer 6

您需要解析的數量第一。這應該工作。

function calculateTotal() { 

    var postageVal = document.getElementById('postage').value; //$68.50 
    var subtotalVal = document.getElementById('subtotal').value; //$378.00 

    var postage = parseFloat(postageVal.substr(1)); //68.50 
    var subtotal = parseFloat(subtotalVal.substr(1)); //378.00 
    var totalVal = postage+subtotal; 

    alert(postage); 
    alert(subtotal); 
    alert(totalVal); 

}; 

Answer 7

感謝您的所有答案！我會嘗試出來，我敢肯定，他們比我更好的解決方案：

<script type="text/javascript"> 
function calculateTotal() { 

    var postageVal = document.cart.postage.value; 
    var subtotalVal = document.cart.subtotal.value; 

    var postage = postageVal.substr(1); 
    var subtotal = subtotalVal.substr(1); 
    var totalVal = Number(postage)+Number(subtotal); 

    document.cart.total.value = "$"+totalVal.toFixed(2); 

}; 
</script> 

Answer 8

其他人有parseFloat正確的想法。

我只是想提一提，我喜歡收拾這樣的數值（相對於與SUBSTR解析）：

var postageVal = document.getElementById('postage').value; //$68.50 

var postage = parseFloat(postageVal.replace(/[^0-9.]/g, '')); 

這取代通話將字符串刪除任何字符，除了0 -9和。（期間）。在正則表達式的末尾不是/g。這很重要，因爲沒有它，只有第一個匹配的事件將被替換。

Answer 9

一元加應該工作：

var totalVal = (+postage) + (+subtotal); 

但你可能預期的郵資和分類彙總變量是數字，而不是字符串，所以......

var postage = +postageVal.substr(1); //68.50 
var subtotal = +subtotalVal.substr(1); //378.00 
var totalVal = postage+subtotal; 

Answer 10

有過相同的排序麻煩我檢查了JS parseFloat和parseInt函數，發現它們很糟糕。

因此，我通過在添加元素的值之前乘以元素的值* 1來防止出現整個問題。這會強制JS將結果視爲數字，即使該值爲空，以便可以正確處理它。如下：

var TEMP = (1 * el_1.value) + (1 * el_2.value); 
document.getElementById("el_tot").value = TEMP; 

假設您看到「el_1」等是表單中的字段名稱。

Answer 11

1.simple JavaScript的追加程序

<!DOCTYPE html> 
<html> 
<body> 
<p>This calculation perfoms an addition, and returns the result by using a  JavaScript.  Check for a demo</p> 
<form> 
Enter no 1:<input type="text" name="a"><br> 
Enter no 2:<input type="text" name="b"><br> 
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&  nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<button onclick="calc(this.form)">Calculate</button> 
</form> 

<script> 
function calc(form) 
{ 
var a=eval(form.a.value); 
var b=eval(form.b.value); 
var c=a+b; 
alert("The sum is " + c); 
} 
</script> 

</body> 
</html>