how to pick a new index of an array by each click

Your return is too early. You also need to handle when mycolor is past the array length.

var color = function() {
    var list = ["red", "blue", "green"];    

    if (mycolor >= list.length)
       mycolor = 0;

    return list[mycolor++];
};

An alternative way of writing the above would be the following:

var color = function() {
    var list = ["red", "blue", "green"];    
    return list[mycolor++ % list.length];
};

function run(){
    $(".demo").text(color());
}

You are incrementing post return, which guarantees the code isn't executed.

Try something like...

var color = function() {
    var list = ["red", "blue", "green"];    
    return list[mycolor++];
};

Which returns the number and then increments it. You should probably do % list.length to so calling beyond the length of your array will wrap the results instead of returning undefined (unless of course, that's what you want).

How about this:

var mycolor = 0;
var list = ["red", "blue", "green"]; 

var color = function() {
    return list[mycolor];
};

function run(){
    $(".demo").text(color());
    mycolor++;
    if(mycolor > 2) {
        mycolor = 0;
    }
}

mycolor isn't getting update because you incrementing it after you already have returned from the function.

This is the only one that will work because it's the only code that includes a click event.

var mycolor = 0;
var maxcolor = 0
var color = function() {
    var list = ["red", "blue", "green"];    
    maxcolor = list.length;
    if((mycolor + 1) > maxcolor)
    {
        mycolor = 0
    }
    return list[mycolor++];

};

$(".demo").text('on', 'click', color());