Can't display array output

Question

<script type="text/javascript">
function show(){

    var word = document.getElementById("inp").value;
    var letters = [];
    for(i=0; i<=word.length; i++){
        letters = word.substring(i,i+1);
    }
    document.getElementById("div").innerHTML = letters[0];

    //setInterval();
}

</script>
</head>

<body>

<input type="text" id="inp" />
<button onclick="show()">Show</button>
<br>
<div id="div"></div>

</body>

The output of "letters[0]" is showing up as undefined. I want to create an array, where, let's say if the input was "hello", then, output would be like:

letters[0] = "h"
letters[1] = "e"
letters[2] = "l"
....

And also, I would like to add a setInterval() function to it, so that it displays the letters, one by one, with a delay.

Thanks!

Another thing: i<=word.length can’t be right. It’s supposed to be i<word.length, because it will go over the last index of the string. This doesn’t throw an error when using substring, because it will simply return an empty string. Be aware of that. — Sebastian Simon
– Sebastian Simon, Commented Sep 30, 2015 at 3:52

Tushar · Accepted Answer · 2015-09-30 04:05:59Z

4

Use push method to add elements in the array

Replace

letters = word.substring(i,i+1);

by

letters.push(word.substring(i,i+1));

Demo

function show() {
  var word = document.getElementById("inp").value;

  var letters = [];
  for (i = 0; i < word.length; i++) {
    letters.push(word.substring(i, i + 1));
  }

  var i = 0;
  var interval = setInterval(function() {
    document.getElementById("div").innerHTML = letters[i];
    ++i === letters.length && clearInterval(interval);
  }, 250);
}

<input type="text" id="inp" />
<button onclick="show()">Show</button>
<br>
<div id="div"></div>

To get the array of individual letters you can also use split

var div = document.getElementById("div"); // Cache

function show() {
  var word = document.getElementById("inp").value; // Get latest value

  var letters = word.split(''), // Split every character and store in letters array
    i = 0; // Initialization to zero

  div.innerHTML = ''; // Clear previous text

  var interval = setInterval(function() {
    div.innerHTML += letters[i]; // Append a character

    ++i === letters.length && clearInterval(interval); // Clear interval after appending all the characters
  }, 100); // Call the function after every 100 milliseconds
}

<input type="text" id="inp" />
<button onclick="show()">Show</button>
<br>
<div id="div"></div>

edited Sep 30, 2015 at 4:05

answered Sep 30, 2015 at 3:48

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Arun P Johny Over a year ago

why not var letters = word.split('');?

Tushar Over a year ago

@ArunPJohny Thanks for helping me improve answer

Imran Niloy Over a year ago

So you're setting var interval = "something", but how are you calling it? What i mean to say is that why won't something like this work:

Tushar Over a year ago

@ImranNiloy The setInterval function is called immedietly, the return value i.e. interval id is cached in the variable which is used for clearing interval later

Imran Niloy Over a year ago

code for(i=0; i<word.length; ++i){ setInterval(function(){ document.getElementById("div").innerHTML = letters[i]; }, 1000); }

|

Ryan · Accepted Answer · 2015-09-30 03:48:54Z

1

Don't overwrite the value of letters in each iteration. Append to the Array object using push.

function show(){

    var word = document.getElementById("inp").value;
    var letters = [];
    for(i=0; i<=word.length; i++){
        letters.push(word.substring(i,i+1))
    }
    document.getElementById("div").innerHTML = letters[0];

    //setInterval();
}

answered Sep 30, 2015 at 3:48

Ryan

14.7k9 gold badges68 silver badges104 bronze badges

Comments

Arun P Johny · Accepted Answer · 2015-09-30 03:50:51Z

1

The problem is you are overriding the value of letters instead of creating it as an array

var interval, i;

function show() {

  var word = document.getElementById("inp").value;
  var letters = word.split('');

  clearInterval(interval); //clear the previos interval
  i = 0; //start from the first index
  interval = setInterval(function() {
    document.getElementById("div").innerHTML = letters[i];
    i = ++i < word.length ? i : 0; //if the last char is shown start from beginning
  }, 500);

}

<input type="text" id="inp" />
<button onclick="show()">Show</button>
<br>
<div id="div"></div>

answered Sep 30, 2015 at 3:50

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

Tushar · Accepted Answer · 2015-09-30 05:29:04Z

1

Only problem with the code is assign letters either using push method of array or using indexing:

function show() {

  var word = document.getElementById("inp").value;
  var letters = [];
  for (i = 0; i <= word.length; i++) {
    letters[i] = word.substring(i, i + 1);
  }
  document.getElementById("div").innerHTML = letters[0];
}

//setInterval();

<input type="text" id="inp" />
<button onclick="show()">Show</button>
<br>
<div id="div"></div>

edited Sep 30, 2015 at 5:29

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

answered Sep 30, 2015 at 5:00

Mayur

415 bronze badges

Collectives™ on Stack Overflow

Can't display array output

4 Answers 4

8 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related