Why am I getting 'TypeError: Cannot read property 'length' of undefined'

Question

I am trying to create a typing effect using vanilla JS, but for some reason I keep getting a TypeError: Cannot read property 'length' of undefined error. I don't understand why though, as 'word' is defined. It's been bugging me for a while and I'm the type of person who likes to try to get the answer right on my own, but I'm completely stuck.

var sentence = document.getElementsByClassName('sentence')[0];
var words = ['websites', 'apps', 'games'];
var speed = 100;
var i = 0;
var j = 0;

function type(word) {
	if(i<word.length) {
  	sentence.innerHTML += word.charAt(i);
    i++;
    setTimeout(function() { type(word); }, speed);
  }
}

function backspace(word) {
    if(j<word.length) {
        sentence.innerHTML = sentence.innerHTML.slice(0, -1);
        j++;
        setTimeout(function() { backspace(word); }, speed);
  }
}

function check() {
    if(j < words.length) {
        setTimeout(function() { type(words[j]); }, 1000);
        j++;
        check();
    }
}

check();

* {
    font-family: Arial;
  }
  
  .container {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .cursor {
    background: #000;
    width: 2px;
    height: 15px;
    animation: blink 1s steps(5, start) infinite;
  }
  
  @keyframes blink {
    to { visibility: hidden; }
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="styles.css">
    <title>Typing Effect Example</title>
</head>
<body>
    <div class="container">
        <div class="sentence">We make </div>
        <div class="cursor"></div>
    </div>

    <script src="scripts.js"></script>
</body>
</html>

It's hard to follow your code as you're manipulating global variables across multiple functions in async operations. I'm going to venture a guess that those i and j global variables are the culprit. But we might be able to help better if you describe what you're actually trying to do. — Arash Motamedi
– Arash Motamedi, Commented Jan 17, 2018 at 1:51

matmo · Accepted Answer · 2018-01-17 01:51:46Z

2

The function you pass to setTimeout isn't evaluated until the given duration has expired, as you would expect. At that point, your j is going to be 3, and words[3] is undefined. Hence, (undefined).length gives you an error.

Open your browser dev tools and run the snippet through stack overflow, then set a breakpoint where the error occurs. This should be your first reaction when you get stuck.

answered Jan 17, 2018 at 1:51

matmo

1,39912 silver badges17 bronze badges

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

Comments

Jacob · Accepted Answer · 2018-01-17 01:51:21Z

0

What the error is saying is not that the variable is undefined, but that its value is set to undefined. A common way to get a value of undefined is to access a property/index of an object that is not defined. For example, if your index j becomes something outside the bounds of words, then words[j] will equal undefined, so word.length will have a type error since there's no length property of the value undefined.

answered Jan 17, 2018 at 1:51

Jacob

79k24 gold badges159 silver badges245 bronze badges

Comments

s.babar · Accepted Answer · 2018-01-17 06:04:37Z

0

Your variable name is "words" and you are parsing "word" please check variable name.

answered Jan 17, 2018 at 6:04

s.babar

4284 silver badges10 bronze badges

1 Comment

s.babar Over a year ago

That is also good that you use const instead of var so that variable save to be overwrite

Collectives™ on Stack Overflow

Why am I getting 'TypeError: Cannot read property 'length' of undefined'

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related