配列からランダムな文字列を生成する際の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の両方を持っています。