119

I need javascript to add 5 to an integer variable, but instead it treats the variable as a string, so it write out the variable, then add 5 onto the end of the "string". How can I force it to do math instead?

var dots = document.getElementById("txt").value; // 5
function increase(){
    dots = dots + 5;
}

Output: 55

How can I force it to output 10?

1

11 Answers 11

120

You have the line

dots = document.getElementById("txt").value;

in your file, this will set dots to be a string because the contents of txt is not restricted to a number.

to convert it to an int change the line to:

dots = parseInt(document.getElementById("txt").value, 10);

Note: The 10 here specifies decimal (base-10). Without this some browsers may not interpret the string correctly. See MDN: parseInt.

Sign up to request clarification or add additional context in comments.

5 Comments

shortcut... dots = +document.getElementById("txt").value
parseInt(..., 10) also, always use a radix... a sanity check... if (!dots || dots < 1) may be in order too...
Better use increment operator for Addition. like VARIABLE++ instead of VAR= VAR+1;
function add() { var a = prompt('Enter 1st number'); var b = prompt('enter 2nd number'); var c = a + b; console.log('reuslt is ' + c); } add(); for example var a = 5; and var b = 9; then it prints 59 instead of 14; am unable to understand what's going wrong here.
@AnkurRohilla a and b are strings you need them to be numbers so you can do math on them. This is done by var c = parseInt(a,10)+parseInt(b,10)
69

the simplest:

dots = dots*1+5;

the dots will be converted to number.

1 Comment

Even simpler than that would be dots = +dots+5.
22

DON'T FORGET - Use parseFloat(); if your dealing with decimals.

2 Comments

And don't forget that float is not a decimal datatype stackoverflow.com/questions/588004/…
Just use Number.
20

I'm adding this answer because I don't see it here.

One way is to put a '+' character in front of the value

example:

var x = +'11.5' + +'3.5'

x === 15

I have found this to be the simplest way

In this case, the line:

dots = document.getElementById("txt").value;

could be changed to

dots = +(document.getElementById("txt").value);

to force it to a number

NOTE:

+'' === 0
+[] === 0
+[5] === 5
+['5'] === 5

1 Comment

What happens if it isn't a number? Imagine that it returns a space, the letter 'M', or even the empty string. What happens in this case?
9

parseInt() should do the trick

var number = "25";
var sum = parseInt(number, 10) + 10;
var pin = number + 10;

Gives you

sum == 35
pin == "2510"

http://www.w3schools.com/jsref/jsref_parseint.asp

Note: The 10 in parseInt(number, 10) specifies decimal (base-10). Without this some browsers may not interpret the string correctly. See MDN: parseInt.

Comments

6

You can add + behind the variable and it will force it to be an integer

var dots = 5
    function increase(){
        dots = +dots + 5;
    }

Comments

5

This also works for you:

dots -= -5;

1 Comment

great we don't have to rewrite the first var
4

Number()

dots = document.getElementById("txt").value;
dots = Number(dots) + 5;

// from MDN
Number('123')     // 123
Number('123') === 123 /// true
Number('12.3')    // 12.3
Number('12.00')   // 12
Number('123e-1')  // 12.3
Number('')        // 0
Number(null)      // 0
Number('0x11')    // 17
Number('0b11')    // 3
Number('0o11')    // 9
Number('foo')     // NaN
Number('100a')    // NaN
Number('-Infinity') //-Infinity

Comments

1

its really simple just

var total = (1 * yourFirstVariablehere) + (1 * yourSecondVariablehere)

this forces javascript to multiply because there is no confusion for * sign in javascript.

Comments

1

After trying most of the answers here without success for my particular case, I came up with this:

dots = -(-dots - 5);

The + signs are what confuse js, and this eliminates them entirely. Simple to implement, if potentially confusing to understand.

Comments

-3

UPDATED since this was last downvoted....

I only saw the portion

var dots = 5
function increase(){
    dots = dots+5;
}

before, but it was later shown to me that the txt box feeds the variable dots. Because of this, you will need to be sure to "cleanse" the input, to be sure it only has integers, and not malicious code.

One easy way to do this is to parse the textbox with an onkeyup() event to ensure it has numeric characters:

<input size="40" id="txt" value="Write a character here!" onkeyup="GetChar (event);"/>

where the event would give an error and clear the last character if the value is not a number:

<script type="text/javascript">
    function GetChar (event){
        var keyCode = ('which' in event) ? event.which : event.keyCode;
        var yourChar = String.fromCharCode();
        if (yourChar != "0" &&
            yourChar != "1" &&
            yourChar != "2" &&
            yourChar != "3" && 
            yourChar != "4" &&
            yourChar != "5" &&
            yourChar != "6" && 
            yourChar != "7" &&
            yourChar != "8" && 
            yourChar != "9")
        {
            alert ('The character was not a number');
            var source = event.target || event.srcElement;
            source.value = source.value.substring(0,source.value-2);
        }
    }
</script>

Obviously you could do that with regex, too, but I took the lazy way out.

Since then you would know that only numbers could be in the box, you should be able to just use eval():

dots = eval(dots) + 5;

7 Comments

eval() is dangerous if dots is from user input, particularly if it's from stored input. More information
@ChadLevy Thanks for the link - a good read - and bringing this up, but in this case the concern was unwarranted, since it wasn't from user input. dots was a defined variable that was being incremented and just being mistaken for a string. So I'll qualify my answer that it shouldn't be used lightly, as you said, from user/stored input that could have the potential for evil scripting injection. But also in this case, such injection would cause a math error/exception, anyway, so it really wouldn't do anything, either way.
For those downvoting because you think eval() is so dangerous, you need to look at the code in the context the OP was using. It is not, in this case, because he's using input that is not coming from a textbox or any other form of user input where there could be any form of injection of a non-numeric value! I wish I could downvote your downvotes!
Another downvoter. Care to explain yourself, instead of just being a sheep? There are times when eval() is just fine, and you need to look at the context in which it is being used, instead of just blindly believing everything you read without actually understanding it!
@ChadLevy Ok, on that count, you are right. I did not look at that section - I was focused on what he put at the top of the page: the code var dots = 5 function increase(){ dots = dots+5; } does not use a text field, and assigns using direct variables, not from user input. So that's what I went off of. But I saw you're right that he's assigning that text field txt to dots, and dots is a global variable, and so gets updated by that input. You're right. Thanks.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.