An Image Change pt-br Explainer

Explicação de Uma mudança de imagem

Objetivo deste desafio: Adicionar um ouvinte de eventos a um botão que muda a imagem quando se clica no botão.

Passo a passo da solução:
Os ouvintes de eventos esperam um evento específico, por exemplo, um click, e depois executam uma função de retorno de chamada quando esse evento ocorre.

Neste desafio, você adicionará um ouvinte de eventos a button2 para que ele mude img.src ao se clicar nele.

Para concluir o desafio, adicione um ouvinte de eventos a button2. Coloque o 1º argumento do ouvinte de eventos em ’click’ e o 2º argumento em uma função de seta. Em seguida, dentro da função de seta, defina o atributo src de img como pic2. Agora, ao se clicar em button2, a função de seta será executada e o src da img mudará, exibindo uma nova imagem.

Solução do código de exemplo:

(Toque abaixo para revelar)

let pic1 = '../../static/images/poolPup.jpg';
let pic2 = '../../static/images/giraffe.jpg';
let img = document.getElementById('pic');
let button1 = document.getElementById('button1');
let button2 = document.getElementById('button2');

button1.addEventListener('click', () => {
    img.src = pic1;
});

button2.addEventListener('click', () => {
    img.src = pic2;
});

Conceitos de HTML:<img>, <button>

Conceitos de JavaScript: Ouvinte de eventos, Função de seta, document.getElementById, Variáveis