JavaScript-Schreibmaschinenanimation beim Erzeugen einer zufälligen Zeichenfolge aus einem Array;

Question

Ich habe einen zufälligen Kursgenerator. Ich möchte machen, wenn Benutzer auf den Generieren-Button klicken, der Schreibmaschineneffekt passiert. Ich habe versucht, eine Funktion aus meinem vorherigen Code

//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>'; 

} 

Der Code gibt mir eine Fehlermeldung:

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

Was soll ich den Code Arbeit tun, um? Gibt es noch andere Alternativen?

Answer 1

Da der Fehler in typeWriter ausgelöst wird, überprüfen Sie, ob txt als Wert zugewiesen wurde, andernfalls wird der Aufruf .length zu diesem Fehler führen.

Answer 2

Das Problem ist, dass typeWriter mit setTimeout verzögert Anruf wird keine Argumente übergeben bekommen - daher txt Wert undefined sein. Ein Weg, um dieses Problem schafft innere Funktion innerhalb typeWriter, dann ist es in setTimeout mit:

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

Hier addLetter hat sowohl txt, speed und i in ihrem Umfang.