JavaScript - for loop with an array

Question

So here's what I've done so far:

<script>
text = new Array("t", "te", "tes", "test");
for(new i; i < text.length; i++)
{
    document.getElementById('text').innerHTML=text[i];
}
</script>


<body>
<span id='text'></span>
</body>

I'm going to add an timer later, but my question is, why do I get "ReferenceError 'i' is not defined"? It is defined as you can see.. Thanks in advance.

You declare a variable using `var` keyword. [JavaScript 101](http://hsablonniere.github.io/markleft/prezas/javascript-101.html). — undefined, Jan 22 '14 at 05:54
Side note: you should generally use [array literal notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Array_literals) and not `new Array()`. In your case, that would look like `var text = ['t', 'te', 'tes', 'test'];`. — Matt Ball, Jan 22 '14 at 05:56
See http://stackoverflow.com/q/931872/139010 and http://stackoverflow.com/q/1094723/139010 and http://stackoverflow.com/q/885156/139010 — Matt Ball, Jan 22 '14 at 05:59

Bhushan · Answer 1 · 2014-01-22T06:06:54.997

7

Instead of:

for(new i; i < text.length; i++)

Try this:

for(var i=0; i < text.length; i++)

You are using new, and in javascript we have to use var for declaring variables.

Update1

As @MattBall and @oxfn has mentioned in comments, your script is running before the DOM is ready. So you have to place the script after body tag.(or you can you jquery).

Following is working code:

<body>
    <span id='text'></span>
    <script>
    var text = new Array("t", "te", "tes", "test");
    for(var i=0; i < text.length; i++)
    {
        document.getElementById('text').innerHTML = document.getElementById('text').innerHTML +":"+ text[i];
    }
    </script>
</body>

edited Jan 22 '14 at 06:06

answered Jan 22 '14 at 05:54

Bhushan

6,017
12
54
89

Didn't give me an error now, but it won't change the span's text to what's in the array? (as I don't have a timer right now, it goes to the end within a second, but shouldn't I see 'text' at least, in the span?) – prk Jan 22 '14 at 05:55
1

@WoopWoopWoopWoop your code is running before the DOM is ready. – Matt Ball Jan 22 '14 at 05:57
Oh, right. I had this once before and just placed the jScript below, thanks, my bad. – prk Jan 22 '14 at 05:57
1

@WoopWoopWoopWoop Place yor ` – oxfn Jan 22 '14 at 05:58
1

Not "after body tag" but immediately before closing body tag. – RobG Jan 22 '14 at 06:10
Never ever select DOM nodes in loop. – dfsq Jan 22 '14 at 06:12
@RobG updated the answer – Bhushan Jan 22 '14 at 06:12

Krish R · Answer 2 · 2014-01-22T06:09:07.667

You can also use this method aswell,

    var text = new Array("t", "te", "tes", "test");
    text.forEach(function(textvalue) {
        console.log(textvalue);
        document.getElementById('text').innerHTML=textvalue;
    });

Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

To display array content value into <div id="text"></div>

<script>
      function ArrayPrint(){
            var text = ["t", "te", "tes", "test"];
            text.forEach(function(textvalue) {
                console.log(textvalue);
                document.getElementById('text').innerHTML  += textvalue +' | ';
            });
      }
      window.onload = ArrayPrint;
</script>

HTML:

  <div id="text"></div>

score 0 · Answer 3 · answered Jan 22 '14 at 06:04

<!DOCTYPE html>
<html>
<body>
<span id='text'></span>
</body>
</html>


<script  type="text/javascript">
text = new Array("t", "te", "tes", "test");
for(var i=0; i < text.length; i++)
{
    document.getElementById('text').innerHTML=text[i];
}
</script>

Zaheer Ahmed · Answer 4 · 2014-02-02T10:24:59.507

As int in JavaScript is primitive type and it initialization not required the new keyword and JavaScript code working on DOM needs that DOM is already ready to use when code is running so place your script code at bottom just before close of body tag or call it on load.

Also you can cache length property it enhance performance.

    for(var i = 0,max=text.length; i < max; i++)
    {
        document.getElementById('text').innerHTML = document.getElementById('text').innerHTML +":"+ text[i];
    }

JavaScript - for loop with an array

4 Answers4