Question

I have a basic jQuery function going on:

$("#selector").click(function(){
    $("#target").append("Some text to be added...");
});

That works fine, except I want to append different text on each sequential click. For example:

1. First click appends text “Message 1”
2. Second click appends text “Message 2”
3. Third click appends text “Message 3”

and so on and so forth…

Also, I would like to set a limit, to say, 4 which after 4 clicks, nothing else happens.

Any help would be appreciated.

Answer 1

var messages = [
  'First click appends text "Message 1"',
  'Second click appends text "Message 2"',
  'Third click appends text "Message 3"'
];

var i = -1;

var target = $("#target");

$("#selector").click(function(){
    target.append(messages[i = ++i % messages.length]);
});

This will actually “append” them. If you wanted to replace each message each time, you’d use .text() instead of .append().

DEMO (using .text()): http://jsfiddle.net/thVK6/

The i variable will be incremented with each click. When i is equal to messages.length, it will be reset to 0.

So with each click, i is used to grab a new message from the Array.

---

To further explain the increment trick, the % modulo operator returns the remainder when dividing i by messages.length.

When i is equal to messages.length, the remainder is 0, so we’re back to the start.

var i = -1;

First click:

++i; // 0
i = i % messages.length; // 0

messages[ i ]; // first message (index 0)

Second click:

++i; // 1
i = i % messages.length; // 1

messages[ i ]; // second message (index 1)

Third click:

++i; // 2
i = i % messages.length; // 2

messages[ i ]; // third message (index 2)

Fourth click:

++i; // 3
i = i % messages.length; // 0, because 3 % 3 === 0

messages[ i ]; // first message (index 0)

…and so i is now 0 again, so it starts over.

---

So the same increment trick, but spelled out as above would be…

$("#selector").click(function(){
    ++i;
    i = i % messages.length;

    target.append(messages[ i ]);
});

http://jsfiddle.net/thVK6/4/