打字机动画插件bug

Question

我遇到了这个CodePen - https:/codepen.ioDanielgroenpenVeRPOq。. 它作为一个打字机动画的例子被广泛介绍，但当你开始编辑它时，它就会显示一个错误。CodePen说 "Uncaught TypeError: Cannot read property 'length' of undefined"，在JS选项卡的第19行。有什么想法，为什么会出现这种情况？

先谢谢你

请在这里输入图片描述

document.addEventListener('DOMContentLoaded',function(event){
  // array with texts to type in typewriter
  var dataText = [ "Amsterdam.", "Full Service.", "Webdevelopment.", "Wij zijn Occhio!"];
  
  // type one text in the typwriter
  // keeps calling itself until the text is finished
  function typeWriter(text, i, fnCallback) {
    // chekc if text isn't finished yet
    if (i < (text.length)) {
      // add next character to h1
     document.querySelector("h1").innerHTML = text.substring(0, i+1) +'<span aria-hidden="true"></span>';

      // wait for a while and call this function again for next character
      setTimeout(function() {
        typeWriter(text, i + 1, fnCallback)
      }, 100);
    }
    // text finished, call callback if there is a callback function
    else if (typeof fnCallback == 'function') {
      // call callback after timeout
      setTimeout(fnCallback, 700);
    }
  }
  // start a typewriter animation for a text in the dataText array
   function StartTextAnimation(i) {
     if (typeof dataText[i] == 'undefined'){
        setTimeout(function() {
          StartTextAnimation(0);
        }, 20000);
     }
     // check if dataText[i] exists
    if (i < dataText[i].length) {
      // text exists! start typewriter animation
     typeWriter(dataText[i], 0, function(){
       // after callback (and whole text has been animated), start next text
       StartTextAnimation(i + 1);
     });
    }
  }
  // start the text animation
  StartTextAnimation(0);
});

body {
  background-color: #FF5A5A;
  height: 100%;
  font-family: 'tradegothiclt-bold', sans-serif;
}

h1 {
  font-size: 5em;
  color: white;
  text-transform: uppercase;
}

span {
  border-right: .05em solid;
  animation: caret 1s steps(1) infinite;
}

@keyframes caret {
  50% {
    border-color: transparent;
  }
}

  <h1>Hallo, Wij zijn Occhio!</h1>

Answer 1

实际的错误来自于 if (i < dataText[i].length) { 行，从函数 StartTextAnimation 作者正在检查索引是否仍然小于动画所给的词表长度。

所以改成 if (i < dataText.length) { 应该可以