なぜこのグローバルカウンタ変数がsetTimeoutで動作しないのですか？

Question

私は他のすべての文字の色を交互にしてテキストをアニメーション化しようとしています。私のコードはそれを一方向にスタイル化するように働いていますが、setTimeoutはテキストの色を変更するためにもう一度呼び出さないようにしています。

問題は私が見落としている簡単な問題かもしれないカウンタとしてグローバル変数を使用しているようです。

アイデア？ここに私のjavascriptのコードは次のとおりです。

var num = 0; 
function animateText(){ 
    var str = ""; 
    var title = document.getElementById("title").innerHTML; 

    for(var i = 0; i < title.length; i++){ 
     if(num % 2 == 0){ 
      if(i % 2 == 0){ 
       str += '<span style = "color: silver;">' + title.charAt(i) + '</span>'; 
      } else { 
       str += title.charAt(i) + ""; 
      } 
     } else { 
      if(i % 2 != 0) { 
       str += '<span style = "color: silver;">' + title.charAt(i) + '</span>'; 
      } else { 
       str += title.charAt(i) = ""; 
      } 
     } 
    } 

    document.getElementById("title").innerHTML = str; 
    num++; 

    if(num == 10) 
     num = 0; 

    setTimeout("animateText()", 500); 

} 

Answer 1

ジョナサンが指摘しているタイプミスを除いて、あなたのロジックには欠陥があるようです。関数をはじめて、最初の文字列を取得し、さまざまな<span>タグを含むHTMLを構築します。次回の関数では、DOM要素からinnerHTMLを取得し、文字列の場合と同じように処理を開始しますが、今回はすべてのタグを含む前のHTMLです。これは開始した文字列ではありません。元の文字列を変更しないで保存する必要があります。そのたびに前回の書式設定されたHTMLを構築するのではなく、関数を使用するたびにテキスト文字列で始めることができます。

Answer 2

あなたは構文エラー/タイプミスがあります

str += title.charAt(i) = ""; 
//     ^

JavaScriptコンソールは、あなたに言っただろう、これは、違法な譲渡である：

ReferenceError: Invalid left-hand side in assignment 

を

ただし、文字列ではなくsetTimeoutに関数参照を渡すこともできます。

setTimeout(animateText, 500); 

これは内部evalをスキップし、タイムアウト以外のスコープで定義された関数を使用できるようになります「グローバルを。」

Answer 3

グローバル変数は、この行のコードで構文

str += title.charAt(i) = ""; 

があり

これは、有効な割り当て