jQuery adding strings and not concatenating

Question

I'm adding values from select lists (or subtracting) and I can't seem to make it not concatenate the string.

My select list is:

<li class="extraHeight">
    <asp:Image runat="server" CssClass="iconImageMove" ID="Image13" ImageUrl="~/images/icons/ABabyChg_Off.png" />
    <div class="flipWidth">
        <select name="access" class="change" id="ABabyChg_Off"  runat="server">
            <option value="16777216">Off</option>
            <option value="16777216">On</option>
        </select>
     </div> <br /> <p class="noWrap">Accessible baby changing facilities</p>
</li>

<li class="extraHeight">
    <asp:Image runat="server" CssClass="iconImageMove" ID="Image14" ImageUrl="~/images/icons/carpark_off.png" />
    <div class="flipWidth">
        <select name="access" class="change" id="carpark_off"  runat="server">
            <option value="256">Off</option>
            <option value="256">On</option>
        </select>
     </div> <br /> <p class="noWrap">Accessible Car parking facilities</p>
</li>

And my javascript is:

<script>    

        $("select").change(function () {

           var currentAccess = "0";
           var currentText = $(":selected", this).text();
           var value = $(this).val()
           alert(currentAccess);
            if(currentText == "Off")

                    {
                        currentAccess -= value;
                    }  
            if(value != "0") {        
            if(currentText == "On")
                     {
                        currentAccess += value;
                     }
            }

              $.cookie("accessReqs",  currentAccess, { expires: 24 });
              alert(currentAccess);

            })

    </script>

Basically I'm trying to have currentAccess to have the current value as an integer and add and subtract as is required.

Tom

score 5 · Answer 1 · answered Feb 09 '12 at 10:17

5

Welcome to javascript!

alert(1+1); -> 2
alert("1"+"1"); -> 11
alert(Number("1")+Number("1")); -> 2

answered Feb 09 '12 at 10:17

georg

211,518
52
313
390

score 4 · Accepted Answer · edited May 23 '17 at 12:14

4

Use integers instead of strings.

Initialize currentAccess at zero.
The -= operator leaves little place for ambiguity, but the
+= operator can either mean "concatenate a string" or "add a number".
To make it more obvious, convert the variable to a number, eg by using *1 (times 1)

Updated code:

$("select").change(function () {

    var currentAccess = 0; // Instead of "0"
    var currentText = $(":selected", this).text();
    var value = $(this).val() * 1;
    alert(currentAccess);
    if (currentText == "Off")
    {
        currentAccess -= value;
    }
    if (value != 0) {
        if (currentText == "On") {
            currentAccess += value;
        }
    }

    $.cookie("accessReqs", currentAccess, {
        expires: 24
    });
    alert(currentAccess);    
});

edited May 23 '17 at 12:14

Community

1
1

answered Feb 09 '12 at 10:16

Rob W

341,306
83
791
678

1

Some consider `*1` (instead of Number/parseInt) bad style. – georg Feb 09 '12 at 10:27
@thg435 **[citation needed]**. `Number` is a function, and much **[slower](http://jsperf.com/number-vs-parseint-vs-plus/23)** than a plain `*1`. – Rob W Feb 09 '12 at 10:33
Thanks for this. When I add the value to the cookie, then read the cookie back it concatinates it again and loosing it as a value. I've tried parseInt but it doesn't seem to do much – MissCoder87 Feb 09 '12 at 10:54
1

@TomBeech Have you applied all changes by me? When `currentAccess` is a string, `+= value` will concatenate strings, regardless of the `value`'s type. You can use `currentAccess = +currentAccess + 1*value;` instead. Have a look at [this answer](http://stackoverflow.com/a/8112802/938089?are-there-are-any-side-effects-of-using-this-method-to-convert-a-string-to-an-in) for a comparison between all number conversion methods. – Rob W Feb 09 '12 at 10:58
1

@RobW: I can't imagine a javascript application where `Number()` would be a bottleneck. Do you have any real-life example at hand? – georg Feb 09 '12 at 10:59

score 1 · Answer 3 · answered Feb 09 '12 at 10:18

1

try using parseInt function http://www.w3schools.com/jsref/jsref_parseint.asp

answered Feb 09 '12 at 10:18

James Lin

25,028
36
133
233

score 1 · Answer 4 · answered Feb 09 '12 at 10:19

1

Use parseInt() to convert your value in string format to integer and then perform arithmetic operation on them.

More info on parseInt http://www.javascripter.net/faq/convert2.htm#parseInt

answered Feb 09 '12 at 10:19

Sunil Kumar B M

2,735
1
24
31

jQuery adding strings and not concatenating

4 Answers4