배열에서 임의의 문자열을 생성하는 동안 JavaScript 타자기 애니메이션.

Question

난 임의의 따옴표 생성기가 있습니다. 사용자가 생성 버튼을 클릭하면 타자기 효과가 발생합니다. 나는 코드는 나에게 오류를 제공 내 앞의 코드

//var txt = 'I don't want to make the static'; 
//     var speed = 70; 
var i = 0; 

function typeWriter(txt, speed) { 
    if (i < txt.length) { 
     document.getElementById("display").innerHTML += txt.charAt(i); 
     i++; 
     setTimeout(typeWriter, speed); 
    } 
} 

function generateQuote() { 
    document.getElementById("display").style.fontStyle = "normal"; 
    var random = Math.floor(Math.random() * (quotes.length)); 


    typeWriter(quotes[random], 70); 

    // document.getElementById("display").innerHTML='<i>'+quotes[random]+'</i>'; 

} 

에서 함수를 시도 :

Uncaught TypeError: Cannot read property 'length' of undefined at typeWriter

내가 코드를 작동하게하려면 어떻게해야합니까? 다른 대안이 있습니까?

Answer 1

typeWriter에 오류가 발생했기 때문에 txt에 값이 할당되었다는 것을 확인하십시오. .length을 호출하면이 오류가 발생합니다.

Answer 2

으로 전화가 걸려 오는 경우 setTimeout으로 전화가 걸려도 아무런 인수도 전달되지 않으므로 값은 undefined이됩니다. 이 문제를 해결하는 한 가지 방법은 다음 setTimeout 그것을 사용 typeWriter 내부 내부 함수를 생성한다 : 여기서

function typeWriter(txt, speed) { 
    var i = 0; 
    (function addLetter() { 
     document.getElementById("display").innerHTML += txt.charAt(i); 
     i++; 
     if (i < txt.length) { 
     setTimeout(addLetter, speed); 
     } 
    })(); 
} 

addLetter 그 범위 모두 txt, speed 및 i있다.