Reputation: 4200
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>
Upvotes: 1
Views: 8555
Reputation: 428
Your variable name is "words" and you are parsing "word" please check variable name.
Upvotes: 0
Reputation: 1389
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.
Upvotes: 2
Reputation: 78920
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
.
Upvotes: 0