Strings in array are not rendered as strings in HTML

Question

Strings in array are not rendered as strings in HTML

First, my HTML:

<p id="p"></p>

<input id="input" />

<button onclick="fill()">Fill</button>

Then my Javascript:

function fill() {
    var x = document.getElementById('input').value;
    var y = x.split('');
    for (var i = 0; i < y.length; i++) {
        if (i == 0) {
            setTimeout(function() {
                document.getElementById('p').innerHTML = y[i];
            },(i * 50));
        }

        setTimeout(function() {
            document.getElementById('p').innerHTML += y[i];
        },(i * 50));
    }
}

What it does is take text from the textbox, strip every character, including spaces, into an array, and then loop through the array, displaying each character at 50ms spacing. The effect should look like it is printing itself.

The effect works great, but the array values don't seem to look. If I were to type "abc123" I would expect it to return, but instead I get:

undefinedundefinedundefinedundefinedundefinedundefined

Using console.log()

when I check for an array it looks ok, when I check for typeof

individual values of the array I get string

, but when I check typeof

for an array I get object

. Perhaps this is what destroys it ...

I tried using toString()

on y[i]

, which just spits out "[object Window]", I tried to define an array like this var y = new Array;

and then doing it split()

, nothing works. I will completely lose. Actually I would like some kind of help. Thank!

+3

javascript string object arrays

Eric David Sartor May 21 '15 at 14:16

source to share

3 answers

yuyokk · Answer 1 · 2015-05-21T14:27:00+0000

I believe the problem is with the closure. Try this js code. I wrapped everything inside the loop in IIFE functions. I think it is well explained here Please explain the use of JavaScript closures in loops

<script>
  function fill() {
      var x = document.getElementById('input').value;
      var y = x.split('');
      for (var i = 0; i < y.length; i++) {
        (function(i){
          if (i == 0) {
              setTimeout(function() {
                  document.getElementById('p').innerHTML = y[i];
              },(i * 50));
          }

          setTimeout(function() {
              document.getElementById('p').innerHTML += y[i];
          },(i * 50));
        })(i);
      }
  }
</script>

Nicholas thomson · Answer 2 · 2015-05-21T14:26:36+0000

By calling setTimeout, you plan for something to happen in the future. By the time the function that you delay with setTimeout

executes, the loop is completely executed, and i

now it is y.length

. So if you type test

while executing a function, it will try to add y[4]

as a letter undefined

. To fix this, you can do something like this:

function fill() {
    var x = document.getElementById('input').value;
    var y = x.split('');
    console.log(y);
    for (var i = 0; i < y.length; i++) {
        timeOutAdd(y[i], i*50)
    }
}


function timeOutAdd(c, delay){
    setTimeout(function() {
        document.getElementById('p').innerHTML += c;
    }, delay);
}

<p id="p"></p>

<input id="input" />

<button onclick="fill()">Fill</button>

Run code Hide result

By adding a function timeOutAdd

that gets called immediately instead of delaying, we can hang with the parameter values until the setTimeout function is run.

Note. I also removed the second call to setTimeout, this was unnecessary and caused an error where the first character of the string was printed twice.

Rick hitchcock · Answer 3 · 2015-05-21T15:29:41+0000

This solves the closure problem and also simplifies the output logic. No need to split the string into an array:

function fill() {
  var x = document.getElementById('input').value,
      p = document.getElementById('p');
  
  for(var i = 0; i < x.length; i++) {
    (function(i) {
      setTimeout(
        function() {
          p.innerHTML= x.substr(0, i+1);
        },
        i*50
      )
    })(i);
  }
}

<p id="p"></p>

<input id="input" value="abcde" />

<button onclick="fill()">Fill</button>

Run code Hide result

Strings in array are not rendered as strings in HTML

More articles: