0

I am very confused between string and number addition as you can see in this code I can't add "i" with "1" as a number like whenever I try to do "document.getElementById("demo").innerHTML = text += "
" + i + 1;" I get answer 11 BTW the value of "i" is 1. I have found a solution for this but the thing is that i is also a number and 1 of course is then why I have to follow some strange pattern. For more information read the code below:

      function myFunction() {
        var text = "";
        var i;

        Loop1:
        for (i = 0; i < 10; i++) {
            document.getElementById("demo").innerHTML = text += "<br>" + i + 1;
        }
          }

I can't write it like this because the computer will concat it like strings. So the solution I found looks like this:

          function myFunction() {
            var text = "";
            var i;

            for (i = 0; i < 10; i++) {
                document.getElementById("demo").innerHTML = text += "<br>" + Number(i+1);
            }
           }
<body onLoad="myFunction()">

<span id="demo"><span>

</body>

This works just fine but I don't understand why since I am new in the coding world.

iLuvLogix
  • 3,762
  • 18
  • 36
Aneeq Ak
  • 47
  • 8
  • 1
    `text += "
    " + (i + 1);` Use parentehsis, currently everything is converted to a string.     – Teemu Nov 05 '20 at 15:39
  • 1
    Order of operations, left to right `(string + 1) + 1` – epascarello Nov 05 '20 at 15:40
  • I because of the context. Because you started as string, code is evaluated as string, so "+" is used as concatenator, not operator. Either you make your addition out of the assignment or your can add parenthesis around – Esteban MANSART Nov 05 '20 at 15:40
  • Does this answer your question? [Adding two numbers concatenates them instead of calculating the sum](https://stackoverflow.com/questions/14496531/adding-two-numbers-concatenates-them-instead-of-calculating-the-sum) – VLAZ Nov 05 '20 at 15:42
  • 2
    While you're at it, why not `for (i = 1; i <= 10; i++)` so you don't have to do `i+1` inside your loop? – Marc Nov 05 '20 at 15:43

5 Answers5

1
"<br>" + i + 1

is evaluated as

("<br>" + i) + 1

because addition/concatenation is left-to-right associative.

I.e. "<br>" + i is executed first and will perform string concatenation because "<br>" is a string. The result will therefore be a string. Then you are performing <string value> + 1 which will perform string concatenation for the same reasons.

The grouping operator (...) can be used to change the order of evaluation:

"<br>" + (i + 1)

Now i + 1 will be evaluated first because it has a higher precedence due to the grouping operator (the result will be the number 2) and then "<br>" + 2 will be evaluated.

Btw, there is no need to overwrite the element's content in every iteration of the loop. Just built up the string and update the content after the loop:

function myFunction() {
  var text = "";
  var i;

  for (i = 0; i < 10; i++) {
   text += "<br>" + (i + 1);
  }
  
  document.getElementById("demo").innerHTML = text;
}
Felix Kling
  • 705,106
  • 160
  • 1,004
  • 1,072
0

In your first code, the order in which i is added would make it add to the string first which will turn it into a string

"<br>" + i + 1;

When you use Number() to wrap it around it will no longer be turned into a string because it is now wrapped in a function call.

So basically "string" + 2 would make transform it into a string, which then your addition would be to the string.

Your second solution is basically document.getElementById("demo").innerHTML = text += "<br>" + (i+1);

Khai
  • 303
  • 1
  • 6
0

Adding operation works from the left to the right.

For example: '' + 1 + 2 will be "12" as 1 will be added to the empty string first and then 2 will be added to the string "1". first step - "" + 1 = "1", second step - "1" + 2 = "12"

But if you wrap "" + (1 + 2) in the brackets it will be prioritized as in math. first step - (1 + 2) = 3, second step - 3 + "" = "3"

In your case Number() does it.

Beso Kakulia
  • 556
  • 4
  • 12
0

The reason why you can not add a number to a string is that it will just add the number on and not really add them together

Here is an example

number1 = "1";
number2 = 2;

number = number1 + number2;

console.log(number);
ShadowGunn
  • 50
  • 6
0
document.getElementById("demo").innerHTML = text += "<br>" + i + 1

if you look you will see that you are saying, "text" + 1 + 1. This is one of the oddities of JavaScript being a dynamic language. When the interpreter reaches that it is trying to understand what you are trying to do:

  • does Aneeq want to have: text<br/>11?
  • does Aneez want: text<br/> 2?

etc

so when you are on the second snippet you are being explicit saying: Ok I want you to:

  1. get the text
  2. concat the "
    " string to the text string
  3. Convert the index, i, as a number and add the two number to together
  4. Finally, add the sum to the previous string
Ctfrancia
  • 617
  • 7
  • 21