1
resposta

[Dúvida] Como posso mudar duas imagens com um botão?

//Estou desenvolvendo um código em que preciso apertar um botão e com isso mudar duas imagens diferentes.

//Além das imagens anteriores voltarem após 5 segundos.

//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" onclick="bto1()"><p>1</p></button> 

 //javascript:

 function bto1() {
   const imgSemaforo = document.getElementById("img_semaforo");

   const myTimeout = setTimeout(myGreeting, 3000); 
   function myGreeting() {
     imgSemaforo = imgSemaforo.src='imagens/semaforo_vermelho.png'; 
   }

   imgSemaforo = imgSemaforo.src='imagens/semaforo_verde.png'; 
   const imgCancela = document.getElementById("img_cancela");

   imgCancela = imgCancela.src='imagens/cancela_aberta.png'; 
 };
1 resposta

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:

  1. 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.

  1. 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.

  1. 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.