Question

我正在尝试使用vanilla JS创建一个打字效果，但由于某种原因，我不断收到TypeError: Cannot read property 'length' of undefined错误。我不明白为什么，因为＆＃39;字＆＃39;被定义为。它已经困扰了我一段时间，而我是那种喜欢自己想要得到答案的人，但我完全陷入困境。

＆＃13;

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();

＆＃13;

* {
    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; }
  }

＆＃13;

<!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>

＆＃13;

Answer 1

传递给setTimeout的函数在给定的持续时间到期之前不会被评估，正如您所期望的那样。此时，您的j将为3，words[3]未定义。因此，(undefined).length会给您一个错误。

打开浏览器开发工具并通过堆栈溢出运行代码段，然后设置发生错误的断点。这应该是你遇到困难时的第一反应。

Answer 2

错误说的不是变量未定义，而是值设置为undefined。获取值undefined的常用方法是访问未定义的对象的属性/索引。例如，如果您的索引j超出words的范围，那么words[j]将等于undefined，因此word.length会出现类型错误，因为＃39;值为length的{{1}}属性。

Answer 3

您的变量名是＆＃34;字＆＃34;而你正在解析＆＃34; word＆＃34;请检查变量名称。

为什么我得到＆＃39; TypeError：无法读取属性＆＃39;长度＆＃39;未定义的＆＃39;

3 个答案: