Testo che cambi al click

[webmachine]

Ciaoa tutti ragazzi, vorrei creare uno script che mi permetta, al click di un div, di cambiare il testo nel paragrafo sotto vorrei però inserire una sorta di array di frasi/parole che vengano mostrate ordinatamente ad ogni click vi faccio un esempio:
1° click:
Ciao, messaggio 1
2° Click (Scompare il messaggio precedente e compare...)
Ciao, messaggio 2
3° Click (Scompare il messaggio precedente e compare...)
Ciao, messaggio 3
etc.. etc.. etc..

Ora uso questo codice qui:

   <div onclick="myFunction()"style="background-color:red;width:300px;height:300px;"></div>

 <p id="demo"></p>
 <script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Hello World";
}

</script>

come posso incrementarlo per farlo funzionare nel modo che voglio io?

Grazie Mille

 

[marino51]

questo è l'esempio più semplice (testato con IE),

<div onclick="myFunction()" style="cursor:pointer; background-color:red; width:300px; height:300px;"></div>

<p id="demo"></p>

<script>

var counter=0;
document.getElementById("demo").innerHTML = "Hello World";

function myFunction() {
    counter++;
    switch(counter) {
        case 1:
            document.getElementById("demo").innerHTML = "Ciao, messaggio 1";
            break;
        case 2:
            document.getElementById("demo").innerHTML = "Ciao, messaggio 2";
            break;
        case 3:
            document.getElementById("demo").innerHTML = "Ciao, messaggio 3";
            break;
        default:
            document.getElementById("demo").innerHTML = "Hello World";
            counter=0;
    }
}

</script>

in alternativa, puoi creare un' array in cui inserire i testi, sostituendo la gestione "switch" con la gestione dell' array