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

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.

Answers


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++];
}

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];
});

Need Your Help

VBA Validation List : Choices are not displayed

excel validation vba excel-vba

I am currently developping some Excel Macros, and I have to use the cell validation.

ASP.NET MVC4 bundles do not exist in release build

c# asp.net asp.net-mvc asp.net-mvc-4

My ASP.NET MVC4 project works fine in debug builds, as long as I don't mind repeatedly rebuilding and republishing when it gets a little confused and "loses" the bundles, as it often does.