Need some help with a personal project - JavaScript issue with type conversion

I put a portion of my code on a codepen for an example:

What I’m trying to do is display these variable values in a table. When information is entered into the first form, it’s meant to subtract that value from the variable and update in the table. When information is entered into the second form, it’s meant to add that value to the variable and update in the table. (I’m making a small inventory tracking site.)

Both forms use input fields, and the type is set to number. I’ve got the variable initialized with a number.

Here’s what’s happening: the first form works as I want, and the value entered subtracts from the variable and shows in the table. All good. However, when I enter values into the second form, it’s somehow changing from a number into a string, and so it’s appending the entered value to the end of the variable instead of changing/adding the value to the variable. And I can’t for the life of me figure out why.

Both functions for the forms are almost identical…the only differences (at least that I can tell) are the names of the functions and local variables, and that one does -= and one does +=. I’m really hoping someone can help me figure out why the second form is concatenating and not adding, cause I can’t see it. Why would one work and the other not - is it only that js also uses the + sign to concate, and so I need to do something else? I’m checking each input to tell if it’s empty or not, and if it is assigning it to 0 - is there maybe something going weird with that that changes it from number to string, or maybe not even necessary? I could really use some fresh eyes to hopefully help me figure out why this change is happening and how I can fix it.

Yeah this is one of the those type coercion issues with the javascript. When you subtract two varables having different primitive type as in one is string and another one is of number type for example:

var a="12"; var b=10; a-b would give you the result 2

Now when if one of them can’t be casted into number than it would result into NaN(not a number) type.For example:

``var a="linda"; var b=10 a-b would give you the result NaN

Now when it comes to adding them both,the ‘+’ operator can perform two functions concatenation as well as addition(in case of numbers),so when js finds that one of the variable is a string and another one is a number it type casts the variable with number type into a string type and concatenates both of them.For example:

var a="10"; var b=12; a+b would be "1012"(concatenated string)

Hope i made you understood what’s happening under the hood with js.

Now for the solution what i propose is when you get the value of variables db1,m1,db2,m2 you cast them into an integer/Number for safety so that both of the variables when you add/subtract them will be of the same type and you can avoid weird coercion issues which occurs most commonly in javascript.

Hope this much info helps.If you want i can fork your pen and make the necessary changes as well.Do tell me if you want me to do that.


1 Like

In javascript the .value property returns a String. What is happening when you use -= is that javascript will automatically cast the string as a number since the - operation does not exist for JS strings. When however you want to use the += operator you get concantenation since + evaluates to concantenation for strings. What you want to do is to explicitly cast the .value returns as Numbers. Say

var m2 = Number(form.msize2.value)

1 Like

Thank you both!! I had a feeling that’s what was happening but wasn’t quite sure how to help it not happen. That Number() seems to have done the trick to solve it! Whew that feels better to have that fixed! :slight_smile: