porque da undefined

Ângelo,

O problema está onde marquei com (*) abaixo:

function mudaCor() {
        if (proximaCor < cores.length){
            proximaCor++
            cores[proximaCor] (*)
        }else{
        proximaCor = 0
        cores[proximaCor] (*)
        }
        alert('cor alterada para ' + cores[proximaCor] );
        return false;
    }

Essas linhas não fazem nada. Funciona se você atribuir aquele código a uma variável e usar essa variável no alert.

Quando passa de 3 para 4 você está dentro do primeiro trecho do if, então o alert vai executar cores[4], que não existe. Só na próxima iteração da função vai zerar.

é verdade aqueles dois pontos são desnecessários, não tinha notado, mas eu ainda não compreendo porque ele tenta executar cores[4], já que escrevo

if (proximaCor < cores.length){
     proximaCor++
}else{
        proximaCor = 0

a lógica não seria que ao ver que não é menor passar para o 'else' ??

Ângelo,

peço desculpas, meu post ficou um pouco confuso mesmo.

O seu array tem 3 itens:

var cores = ['blue','red','green']

As posições vão de 0 a 2.

O seu IF verifica se a "proximaCor" é menor do que 3:

if (proximaCor < cores.length){

Quando você vai mudar do verde para o azul a sua "proximaCor" está valendo 2 (ou seja, menor que 3), então entra na primeira parte do IF e lá é feito outro incremento, passando a valer 3. Mas o array só vai até a posição 2, logo não há uma cor vinculada a essa posição (tecnicamente você está com um "index out of bounds", ou seja, seu índice está fora dos limites do array).

Uma forma de contornar isso é trocando o seu teste dessa forma:

        if (proximaCor < (cores.length - 1)){

Espero ter explicado direito dessa vez.

Compreendi, basicamente o array conta suas posições partir de zero e o "if" a quantidade de variantes, partir de um, genial, obrigado pela ajuda