为什么我收到“ TypeError：无法读取未定义的属性” length”
[英]Why am I getting 'TypeError: Cannot read property 'length' of undefined'
问题描述
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. 
我正在尝试使用香草JS创建键入效果，但是由于某些原因，我不断收到TypeError: Cannot read property 'length' of undefined错误的TypeError: Cannot read property 'length' of undefined 。 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>
3 个解决方案
解决方案1
2 2018-01-17 01:51:46
The function you pass to setTimeout isn't evaluated until the given duration has expired, as you would expect. 正如您所期望的那样，直到给定的持续时间到期后，才会评估传递给setTimeout的函数。 At that point, your j is going to be 3 , and words[3] is undefined. 那时，您的j将为3 ，并且words[3]未定义。 Hence, (undefined).length gives you an error. 因此， (undefined).length给您一个错误。
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. 当您遇到困难时，这应该是您的第一反应。
解决方案2
0 2018-01-17 01:51:21
What the error is saying is not that the variable is undefined, but that its value is set to undefined . 错误的意思不是变量未定义，而是其值设置为undefined 。 A common way to get a value of undefined is to access a property/index of an object that is not defined. 获取undefined值的一种常见方法是访问undefined对象的属性/索引。 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 . 例如，如果您的索引j变成了words范围之外的东西，那么words[j]将等于undefined ，因此word.length将具有类型错误，因为不存在undefined值的length属性。
解决方案3
0 2018-01-17 06:04:37
您的变量名是“ words”，而您正在解析“ word”，请检查变量名。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.