Javascript += equivalent?

Question

My code is a simple function that checks which radio button was pressed, and adds the value of that radio button to my var input = 0;. However, I know I am doing something wrong as it works but the output is wrong. When one of the if statements is true, instead of input(0) now being equal to itself plus the new value of the getElementById("small").value, it prints out 010 as opposed to the now 10.

I know in Java there was a convention similar to input += getElementById("small").value; but this doesn't seem to work. So as you can see in my example below, I tried the alternative of input = input + /*code*/; but still no luck.

I am new to JavaScript but very familiar with Java. I imagine I'm just using the wrong syntax here but all my Google searches are a bust.

function calculate()
{
    var input = 0;
    if (document.getElementById("small").checked) 
    {
        input = input + document.getElementById("small").value;
    }
    else if (document.getElementById("medium").checked)
    {
        input = input + document.getElementById("medium").value;
    }
    else if (document.getElementById("large").checked)
    {
        input = input + document.getElementById("large").value;
    }
    else
    {
        alert("failed");
    }

    document.getElementById("outar").innerHTML = input;
}

you need to `parseInt(value)` to convert to a integer rather than a text value when grabbing number values from the dom. — David, Nov 11 '15 at 00:34

score 6 · Accepted Answer · answered Nov 11 '15 at 00:34

6

You're trying to do arithmetic with a string. You need to use parseInt() around each of your document.getElementById("....").value expressions because the .value property is a string.

Example:

input += parseInt(document.getElementById("small").value);

answered Nov 11 '15 at 00:34

elixenide

44,308
16
74
100

ahhhh! this makes so much more sense. I was looking at the return type of .value and was trying to make sense of how to parse it. Are there all types of Parse? parseDouble/Int/Float, etc? – SenjuXo Nov 11 '15 at 00:39
@SenjuXo just `parseInt` and `parseFloat`; JavaScript doesn't have a (native) `parseDouble`. See this answer: http://stackoverflow.com/a/21278297/2057919 – elixenide Nov 11 '15 at 00:45

score 2 · Answer 2 · answered Nov 11 '15 at 00:37

2

Your value is not a number by default, it's a string. You got to parse it first:

input += parseInt(document.getElementById("large").value);

answered Nov 11 '15 at 00:37

jvecsei

1,936
2
17
24

score 2 · Answer 3 · answered Nov 11 '15 at 00:40

2

You can add an additional + symbol before string value in order to convert it to number:

input += +document.getElementById("large").value;

answered Nov 11 '15 at 00:40

Denys Krasnoshchok

715
4
12

score 1 · Answer 4 · answered Nov 11 '15 at 00:34

1

You need to convert .value to a number as an integer or a float with parseInt or parseFloat. .value is a string.

answered Nov 11 '15 at 00:34

Daniel A. White

187,200
47
362
445

score 1 · Answer 5 · answered Nov 11 '15 at 00:41

1

Javascript is dynamically typed language, not static typed like java. document.getElementById("small").value returns a string which needs to be converted to int with parseInt().

Ho[e that helps :)

answered Nov 11 '15 at 00:41

gk0

491
5
4

score 1 · Answer 6 · answered Nov 11 '15 at 00:53

You can also refer to this link-

The returned value from the value is a string . You have to convert it to int before doing any arithmetic operations.

JavaScript is a dynamically typed language, not static typed like java.

Return Value: A String, representing the value of the text field

Javascript += equivalent?

6 Answers6