Простые проблемы с добавлением 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 вместо того, чтобы складывать их вместе ... Может кто-нибудь сказать мне, где я ошибся? :( Идея состоит в том, чтобы обновить текстовое поле total с помощью totalVal, но я еще не дошел до этого!

Answer 1

Вам необходимо преобразовать ваши значения в число с плавающей точкой, прежде чем добавлять их:

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

РЕДАКТИРОВАТЬ: Вот полный пример, который включает проверку на NaN:

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

Попробуйте преобразовать числа в числа с плавающей запятой:

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 3

У всех остальных есть правильная идея с parseFloat .

Я просто хотел упомянуть, что я предпочитаю очищать числовые значения следующим образом (в отличие от анализа с substr):

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

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

Этот вызов замены удалит все символы из строки , кроме 0-9 и . (точка). Не / g в конце регулярного выражения. Это важно, потому что без него будет заменено только первое совпадение.

Answer 4

parseFloat делает свое дело.

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

Answer 5

Он рассматривает почтовые расходы и промежуточные итоги как строки и объединяет их. Вы можете попробовать что-то вроде этого:

var totalVal = 0+postage+subtotal;

Это должно заставить его перейти в числовой режим.

Однако это может привести к проблемам, если значения не окажутся числами. Вы должны запустить его через правильные функции анализа номера и добавить проверки, чтобы убедиться, что они были проанализированы правильно, иначе вы получите NaN.

Answer 6

Имея такие же проблемы, я проверил функции JS parseFloat и parseInt и обнаружил, что они плохо развиты.

Поэтому я предотвращаю всю проблему, умножая значение элемента * 1 перед их добавлением. Это заставляет JS обрабатывать результат как числовой, даже если значения были пустыми, чтобы его можно было правильно обработать. Следующим образом:

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

Предполагая, что вы видите, что "el_1" и др. Являются именами полей в форме.

Answer 7

Унар плюс должен работать:

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

Но вы, вероятно, хотели, чтобы ваши почтовые и промежуточные переменные были числами, а не строками, поэтому ...

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

Answer 8

Сначала вам нужно разобрать номер. Это должно работать.

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 9

Я не проверял ваш код, поэтому возможны другие проблемы, но приведенное ниже исправление с использованием 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 10

1.Простая программа добавления 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>