Javascript onclick event to write different text to an element with each click

Question

What Javascript code can I use to write to the HTML DOM? I want to create a button which each time I click it, it writes different text to a document element? Example;

first click:

document.getElementById("paragraph").innerHTML= "This is is the initial text."

second click:

document.getElementById("paragraph").innerHTML= "This text replaces the initial text"

third click:

document.getElementById("paragraph").innerHTML= "This text replaces the text from the second click"

and so forth and so forth...

All without Thanks in advance.

Answer 1

Add all the text options into an array.

Set up a variable that counts up with each click.

Call the text from the array using the number of the counter.

Some code:

var counter = 0;
var theArray = new Array("This is is the initial text.", "This text replaces the initial text", "This text replaces the text from the second click");

function clicked(){
   document.getElementById("paragraph").innerHTML= theArray[counter++];
}

Answer 2

Create an array of all the available text line available.

Then on click of button, generate a random number and replace with that index value from array.

var contentArray = ["This is is the initial text.", "This text replaces the initial text",    "This text replaces the text from the second click"],
length = countArray.length;

$(btn).bind('click',function(){
  var randomNumber = Math.floor(Math.random()*length);
  document.getElementById("paragraph").innerHTML = contentArray[randomNumber];
});