Oi Marcelo, tudo bem?
Desculpe a demora em retornar.
No seu código, existem alguns problemas que podem estar impedindo o funcionamento correto do que você deseja fazer. Vou listar abaixo algumas sugestões para corrigir esses problemas e implementar a mudança de imagens com um botão:
- Use a função
setTimeout
para mudar as imagens de volta após 5 segundos:
setTimeout(() => {
imgSemaforo.src = 'imagens/semaforo_vermelho.png';
imgCancela.src = 'imagens/cancela_fechada.png';
}, 5000);
Essa função executa uma função após um determinado tempo, em milissegundos. No caso acima, estamos executando uma função anônima que muda as imagens de volta após 5 segundos.
- Use
addEventListener
em vez de onclick
para adicionar um evento de clique ao botão:
const bto1 = document.getElementById('bto1');
bto1.addEventListener('click', () => {
// código para mudar as imagens
});
Dessa forma, é possível adicionar o evento de clique ao botão de forma mais flexível e sem misturar o código HTML e JavaScript.
- Para mudar as imagens, basta alterar o atributo
src
das tags img
:
imgSemaforo.src = 'imagens/semaforo_verde.png';
imgCancela.src = 'imagens/cancela_aberta.png';
Com essas sugestões, o código final pode ficar assim:
HTML:
<div class="semaforo">
<img src="imagens/semaforo_vermelho.png" id="img_semaforo" alt="">
</div>
<div class="cancela">
<img src="imagens/cancela_fechada.png" id="img_cancela" alt="">
</div>
<button id="bto1"><p>1</p></button>
JavaScript:
const bto1 = document.getElementById('bto1');
const imgSemaforo = document.getElementById('img_semaforo');
const imgCancela = document.getElementById('img_cancela');
bto1.addEventListener('click', () => {
imgSemaforo.src = 'imagens/semaforo_verde.png';
imgCancela.src = 'imagens/cancela_aberta.png';
setTimeout(() => {
imgSemaforo.src = 'imagens/semaforo_vermelho.png';
imgCancela.src = 'imagens/cancela_fechada.png';
}, 5000);
});
Com essas alterações, o botão deve mudar as imagens do semáforo e da cancela, e após 5 segundos, as imagens devem voltar ao estado original. Você pode aumentar ou diminuir o tempo para o que te agrada mais.
Você pode ver como ficou aqui, peguei umas imagens na internet para testar visualmente.
Um abraço e bons estudos.