Nova Feature - Robotron

Oi Bruno, tudo bem?

Parabéns por praticar! Logo mais você vai ter adquirido bastante conhecimento e feito um projeto incrível para colocar no seu portfólio :D

Gostei bastante da sua solução! Lembrando que se tiver qualquer dificuldade, você pode ver na mesma atividade a opinão do instrutor com uma dica de como fazer também!

Bons estudos.

Olá pessoal. Eu tinha tentado um caminho semelhante usando um unico botao para trocar as cores que coloquei no array, uma de cada vez, mas na primeira tentativa o click ja muda direto para rosa, a ultima cor do array, sem passar uma por uma em cada click.

let btnTrocaCor = document.getElementById("btn-cor")

function trocaCor() {
    let imagem = document.querySelector(".robo")
    let cores = ["amarelo", "vermelho", "branco", "preto", "azul", "rosa"]
    cores.forEach((cor) => {
    imagem.setAttribute('src', 'img/' + cor + '.png')
    })
}

btnTrocaCor.addEventListener("click", () => {
    event.preventDefault()
    trocaCor()
})

e nas outras tentativas que tentei acaba retornando undefined. Tenho pouca experiência ainda pra entender esses retornos, voces poderiam me dar uma luz, por favor?

let btnTrocaCor = document.getElementById("btn-cor")

function trocaCor() {
    const cores = ["amarelo", "vermelho", "branco", "preto", "azul", "rosa"]
    cores.forEach((cor) => {
    return cor
    })
}

btnTrocaCor.addEventListener("click", () => {
    event.preventDefault()
    let imagem = document.querySelector(".robo")
    imagem.src = `./img/${trocaCor()}.png`
})

Caroline Almeida, boa noite tudo bem? Espero que sim =) Acredito que o foreach não vai resolver seu problema, pois este método vai percorrer todos todos os elementos do array, é como o ultimo elemento é rosa, este é o valor que vai ser retornado.

A forma que eu encontrei pra te ajudar, foi susbstituindo a funcao trocacor() por esta abaixo:

function indiceArray(){
    const cores = ["amarelo", "vermelho", "branco", "preto", "azul", "rosa"]
    return cores[Math.floor(Math.random() * cores.length)];
}

obs: Desta forma os valores: cores do array serão apresentados numa ordem aleatoria.

Olá, Bruno! Estou bem e você? Muito obrigada por ter dedicado seu tempo para me responder. Eu vi que essa solução que você passou acabou sendo a mesma que você tinha escrito no primeiro post e realmente é uma boa. Porém, eu estava tentando fazer de uma forma que as cores mudassem na sequencia do array que eu escolhi, sem ser aleatoriamente. Depois que você me respondeu, voltei no projeto e acabei pesquisando mais um pouco, até que encontrei uma solução aqui mesmo em um outro forum da Alura, e funcionou! Vou colocar aqui embaixo caso queira ver ou ajude alguém. De qualquer forma obrigada pelo seu apoio! =)

//alterando cor do robo pela ordem exata da array

let btnTrocaCor = document.getElementById("btn-cor");
let cores = ["amarelo", "vermelho", "branco", "preto", "azul", "rosa"];
let i = -1;

btnTrocaCor.addEventListener("click", (event) => {
    event.preventDefault()
    i = (i+1)%cores.length
    let imagem = document.querySelector(".robo")
    imagem.src = `./img/${cores[i]}.png`
})