how do I add two variables by javascript

Question

the code below concatenates the two variables instead of adding them to get one value. any help on how to correct this?

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


         var mal = document.getElementById('<%=txtadults.ClientID%>').value;

        var child = document.getElementById('<%=txtnumchilderen.ClientID%>').value;

        var res = mal + child;
        document.getElementById('<%=txttotal.ClientID%>').value = res;

    }

`.value` always returns a string, hence `+` concatenates them. — Andreas, Dec 27 '19 at 12:27

score 1 · Accepted Answer · answered Dec 27 '19 at 12:13

1

You can use Number() to convert values to number

function calculatetotal1() {
        var mal = Number(document.getElementById('<%=txtadults.ClientID%>').value);

        var child = Number(document.getElementById('<%=txtnumchilderen.ClientID%>').value);

        var res = mal + child;
        document.getElementById('<%=txttotal.ClientID%>').value = res;

}

answered Dec 27 '19 at 12:13

Harun Yilmaz

8,281
3
24
35

this works great but i have one more issue, the result which is displayed in text box by id txttotal gets disappear after postback say after clicking the submit button how do i fixed that too thanks in advance – mcvision Dec 27 '19 at 13:12
1

thank you very much I think I have figured it out: my text box was read only so i just cleared that read only property – mcvision Dec 27 '19 at 13:39
Sorry for the late reply. I have no background with asp.net so I'm not able to tell you what the problem is.Glad to hear that you figured it out. Have a great day :) – Harun Yilmaz Dec 27 '19 at 13:42

score 0 · Answer 2 · answered Dec 27 '19 at 12:13

0

Parsing both variables as float should to the trick.

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


     var mal = document.getElementById('<%=txtadults.ClientID%>').value;

    var child = document.getElementById('<%=txtnumchilderen.ClientID%>').value;

    var res = parseFloat(mal) + parseFloat(child);
    document.getElementById('<%=txttotal.ClientID%>').value = res;

}

answered Dec 27 '19 at 12:13

Tom

337
1
13

this works great but i have one more issue, the result which is displayed in text box by id txttotal gets disappear after postback say after clicking the submit button how do i fixed that too thanks in advance – – mcvision Dec 27 '19 at 13:13
thank you very much I think I have figured it out: my text box was read only so i just cleared that read only property – mcvision Dec 27 '19 at 13:39

score 0 · Answer 3 · answered Dec 27 '19 at 12:13

0

You need to convert those values to number before adding them using the + operator. There are several ways of doing that, but you can use parseInt or parseFloat for this:

var mal = document.getElementById('<%=txtadults.ClientID%>').value;
var child = document.getElementById('<%=txtnumchilderen.ClientID%>').value;

var res = parseFloat(mal) + parseFloat(child);
document.getElementById('<%=txttotal.ClientID%>').value = res;

answered Dec 27 '19 at 12:13

Nisarg Shah

14,151
6
34
55

this works great but i have one more issue, the result which is displayed in text box by id txttotal gets disappear after postback say after clicking the submit button how do i fixed that too thanks in advance – – mcvision Dec 27 '19 at 13:14
thank you very much I think I have figured it out: my text box was read only so i just cleared that read only property – mcvision Dec 27 '19 at 13:39

score 0 · Answer 4 · answered Dec 27 '19 at 12:18

You are getting input values from textbox and the datatype of textbox value by default is string. So your current code is just considering it as string and doing concatenation. Try using parseFloat() function for both values. Try the following code.

function calculatetotal1() {


     var mal = parseFloat (document.getElementById('<%=txtadults.ClientID%>').value);

    var child = parseFloat (document.getElementById('<%=txtnumchilderen.ClientID%>').value);

    var res =  mal + child;
    document.getElementById('<%=txttotal.ClientID%>').value = res;

}

score 0 · Answer 5 · edited Dec 27 '19 at 13:00

0

In JavaScript, + operator acts like concatenation and add the values Like below

Var x = 2 + 3 // will be 5
Var y = '2' + 3 // will be 23 as string

edited Dec 27 '19 at 13:00

AddyProg

2,960
13
59
110

answered Dec 27 '19 at 12:35

Siva K V

10,561
2
16
29

how do I add two variables by javascript

5 Answers5