Adding numbers randomly concat as strings instead numeric values

Question

I wrote a simple function to add odd numbers and even numbers separately, for between given two numbers

here is my code :

    function calculateSum() {
        var startV = document.getElementById("startV").value;
        var endV = document.getElementById("endV").value;
        var evenV = 0;
        var oddV = 0;
        console.log(">>", "evenV", typeof evenV)
        console.log(">>", 'oddV', typeof oddV)


        for (var i = startV; i <= endV; i++) {
            if ((i % 2) == 0) {
                evenV = evenV + i;
                console.log(i, "evenV", typeof evenV)
            } else {
                oddV = oddV + i;
                console.log(i, 'oddV', typeof oddV)
            }
        }
        var disMessage = "even Value:" + evenV + "
 odd Value:" + oddV;

        document.getElementById("dis").innerHTML = disMessage;
    }

if startV is 2 and endV is 5, expected output is evenV = 6 and oddV = 8. But received output is

even Value:024 odd Value:8

Why javascript has this behavior ?
I know I can use parseInt explicitly. But is it the only way to overcome this issue? Because for every add function, using parseInt should not be necessary and it can be a waste of resources AFAIK.

user_11701474 · Answer

Change in your for loop the value of the initiated index:

for (var i = parseInt(startV); i <= endV; i++)

It happens because your current test case, i is of type string at first (because i = startV when startV is a string), then the block of i%2===0 is accessed and i++ converts the index to a type of number

https://codepen.io/misha1109/pen/VwKOoJe?editors=1111

user_9380653 · Answer

HTML Input elements are documented to return a string representing a number.

You can use valueAsNumber to get the actual numerical value.

var startV = document.getElementById("startV").valueAsNumber;
var endV = document.getElementById("endV").valueAsNumber;

You can use parseInt method as:

var startV = parseInt(document.getElementById("startV").valueAsNumber);
var endV = parseInt(document.getElementById("endV").valueAsNumber);

You can use + also:

var startV = parseInt(document.getElementById("startV").valueAsNumber);
var endV = parseInt(document.getElementById("endV").valueAsNumber);
startV = +startV;
endV = +endV;

user_2932476 · Answer

Input always returns string values , if you dont want to use parseInt , first make sur the input is type="number" to prevent imputing chars ,

you could convert it idrectly using

Number(yourvalue)

or you could do little trick to set initial value of i as number type by multiplying by 1 , so the first value of the i var would be a number ( typed as number at first )

var i = startV * 1 // be sur frist value is number type ;

se below snippet :

function calculateSum() {
  var startV = document.getElementById("startV").value;
  var endV = document.getElementById("endV").value;
  var evenV = 0;
  var oddV = 0;
  console.clear();
   console.log(">>", "endV", typeof endV)
   console.log(">>", 'oddV', typeof oddV)
  
  var i = Number(startV);
  // or var i = startV * 1;

  for (i; i <= endV; i++) {
    if ((i % 2) == 0) {
      evenV = evenV + i;
      console.log(i, "evenV", typeof evenV)
    } else {
      oddV = oddV + i;
      console.log(i, 'oddV', typeof oddV)
    }
  }
  var disMessage = "even Value:" + evenV + "
 odd Value:" + oddV;

  document.getElementById("dis").innerHTML = disMessage;
}

.as-console-wrapper {
  height:50px;
}

Adding numbers randomly concat as strings instead numeric values

3 Answers