ワンクリックで複数回変更する

Question

ワンクリックで複数回テキストを変更するJavaScriptを取得しようとしていますが、元のテキストに戻っていきます。テキストを変更することはできますが、自動的に別のテキストに変更することも、元のテキストに戻すこともできません。

ので、テキストは、それが戻って「オリジナルテキスト」

に行くだろう、私は必要なだけのための「テキスト3」などに「テキスト2」に「元のテキスト」に「テキスト1」から行くだろう

は、彼がこれまでに

function changeText() { 
    document.getElementById('changingtext').innerHTML = 'text 1'; 
    setTimeout("changeText()",3000); 
} 

私が持っている現在のコードだと、ここでHTML

<p id="changingtext" onclick="changeText()">original text</p> 

だ任意の助けいただければ幸いです。ありがとう！

Answer 1

あなたはあなたの関数に引数を渡す気にしない場合：

function changeText(new_text) { 
 
    var original_text = document.getElementById('changingtext').innerHTML; 
 
    document.getElementById('changingtext').innerHTML = new_text; 
 
    setTimeout("changeText('"+original_text+"')",3000); 
 
}

<p id="changingtext" onclick="changeText('text 1')">original text</p>

Answer 2

このソリューションは、その中の最後の項目として、元のテキストを追加し、一巡するテキストの配列を使用していますアレイ。

Fiddle

Javascriptを

var changeTexts = ['text 1','text 2','text 3','text 4','text 5']; 

function changeText(index) {  
    var element = document.getElementById('changingtext'); 

    if(index >= changeTexts.length){ 
    changeTexts.splice(-1,1); 
    return; 
    } 

    if(index === 0) changeTexts.push(element.innerHTML); 

    element.innerHTML = changeTexts[index]; 
    index++; 

    setTimeout(function(){ changeText(index); },1000);  
} 

HTML

<p id="changingtext" onclick="changeText(0)">original text</p> 

Answer 3

は、ここに1つの方法です。

var originalText, 
 
    messages = ['text 1', 'text 2', 'text 3'], 
 
    currentItem = 0; 
 

 
function changeText() { 
 
    // capture the original text 
 
    originalText = originalText || document.getElementById('changingtext').innerHTML; 
 

 
    // get element 
 
    var elem = document.getElementById('changingtext'); 
 

 
    // Check if we hit the last message 
 
    // if so, go back to original and stop 
 
    if (currentItem >= messages.length) { 
 
     elem.innerHTML = originalText; 
 
    } else { 
 
     elem.innerHTML = messages[currentItem++]; 
 
     setTimeout("changeText()", 3000); 
 
    } 
 
}

<p id="changingtext" onclick="changeText()">original text</p>

Answer 4

あなたが経験している問題は、あなたがクリックしtimeoutの両方で機能changeTextを呼び出し、その関数はとてもクリックの両方にとtimeoutあなたが設定した後、テキストを変更することですテキストはchangeText関数内の同じハードコーディングされた値に変換されます。

IrkenInvaderとUzbekjonの両方がすでに（書面の時点で）回答しているので、より多くのカスタマイズを可能にするためにchangeText関数にパラメータを追加することです。私のjavascriptは両者とはちょっと違うだろうが、より良い解決策よりも好みの方が多いですが、別の理由で私のjavascriptを投稿します。あなたがsetTimeoutという文字列を使用していて、それはevalを使用するのと同じで、多くの理由で大きなノー・ノーであることが、this articleで説明されており、多くはで、多くはです。

function changeText(new_text) { 
 
    var original_text = document.getElementById('changingtext').innerHTML; 
 
    document.getElementById('changingtext').innerHTML = new_text; 
 
    if (original_text != new_text) { 
 
    setTimeout(changeText.bind(this, original_text), 3000); 
 
    } 
 
}

<p id="changingtext" onclick="changeText('text 1')">original text</p>

あなたはfunction.bindが使用され、これは最初のパラメータとして渡されていることをここで見ることができます。私はこの組み合わせをお勧めします。このため

。これはevalを使用してスキップし、ブラウザ間の互換性を維持しながらsetTimeoutに指定されたfuncに関数引数を引き渡すことができます。過去のIE 9でも使用できます。

setTimeout(changeText, 3000, original_text); 

IE 9以下が必要ない場合は、その方がはるかにクリーンです。