javascript - 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 + "</br> 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

1. Why javascript has this behavior ?
2. 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.

question from:https://stackoverflow.com/questions/65868299/adding-numbers-randomly-concat-as-strings-instead-numeric-values

Answer 1

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 + "</br> odd Value:" + oddV;

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

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

<input id="startV"  type="number" /><br>
<input id="endV"  type="number" /><br>
<button onclick="calculateSum()" >submit</button>
<br ><br>
<div id="dis"></div>