Entrar Ainda não tem acesso?
1
resposta

mais duvidas recorres 23344x

por Jorge Henrique Nicolau da Silva
| 92.1k xp | 103 posts

Eu estou fazendo um programa interativo que mostra um sites imagens diferentes dependendo da hora que é acessado mais eu estou tendo dificuldades em fazer a parte interativa, poderia me dar algumas dicas , pra melhor compreende do que estou falando vai inserir os dados

<header>
   <h1>Hora do Dia</h1>
</header>

<section>

  <div id="msg">
    Aqui vai aparecr a mensagem...
  </div>

  <div id="foto-A">
    <img id="imagem-A" src="malhã.png" alt="foto da malhã">
  </div>
  <div id="foto-B">
   <img id="imagem-B" src="tarde.png" alt="foto da tarde"> 
  </div>
    
  <div id="foto-C">
   <img id="imagem-B" src="noite.png" alt="foto da noite"> 
  </div>  

</section>

<footer>
  <p>&copy; Curso em video</p>
</footer>
<script src="script.js"></script>

<header>
   <h1>Hora do Dia</h1>
</header>

<section>

  <div id="msg">
    Aqui vai aparecr a mensagem...
  </div>

  <div id="foto-A">
    <img id="imagem-A" src="malhã.png" alt="foto da malhã">
  </div>
  <div id="foto-B">
   <img id="imagem-B" src="tarde.png" alt="foto da tarde"> 
  </div>
    
  <div id="foto-C">
   <img id="imagem-B" src="noite.png" alt="foto da noite"> 
  </div>  

</section>

<footer>
  <p>&copy; Curso em video</p>
</footer>
<script src="script.js"></script>

body {
background: rgb(70, 142, 236);
font: normal 15pt Arial;
}

header {
color: white;
text-align: center;
}

section {
background: white;
border-radius: 10px;
padding: 15px;
width: 500px;
margin: auto;
box-shadow: 3px 3px 10px rgba(0, 0, 0.363);

}

div {
text-align: center;
padding: 8px;
}

footer {
color: white;
text-align: center;
font-style: italic;
}

function carregar() {
var msg = window.document.getElementById('msg')
var img = window.document.getElementById('imagem')
var data = new Date()
var hora = data.getHours()
msg.innerHTML = Agora são ${hora} horas
if (hora >= 0 && hora < 12){
//BOM DIA!
img.src = 'malhã.png'
document.body.style.background = '#e2cd9f'
} else if (hora >= 12 && hora < 18) {
//BOA TARDE!
img.src = 'tarde.png'
document.body.style.background = '#b9846f'

} else {
    //BOA NOITE!
    img.src = 'noite.png'
    document.body.style.background = '#515154'
}

}

1 resposta
por Armano Barros Alves Junior
| 5437.3k xp | 11505 posts
Alura Scuba Team Analista de Suporte Educacional II

Boa tarde, Jorge! Como vai?

Primeiramente, notei que há uma pequena confusão com os IDs das imagens no HTML e no JavaScript. No HTML, você está usando IDs diferentes para cada imagem (imagem-A, imagem-B), mas no JavaScript, você está tentando acessar um elemento com o ID imagem, que não existe. Vamos corrigir isso:

  1. HTML: certifique-se de que cada imagem tenha um ID único e de que você use o mesmo ID no JavaScript. Por exemplo, se você quiser alterar a imagem da manhã, use o ID imagem-A no JavaScript.

  2. JavaScript: atualize o código para acessar o elemento correto. Vou sugerir uma modificação no seu código JavaScript para que ele funcione corretamente:

function carregar() {
    var msg = window.document.getElementById('msg');
    var imgA = window.document.getElementById('imagem-A');
    var imgB = window.document.getElementById('imagem-B');
    var imgC = window.document.getElementById('imagem-C');
    var data = new Date();
    var hora = data.getHours();
    msg.innerHTML = `Agora são ${hora} horas`;

    if (hora >= 0 && hora < 12){
        // BOM DIA!
        imgA.style.display = 'block';
        imgB.style.display = 'none';
        imgC.style.display = 'none';
        document.body.style.background = '#e2cd9f';
    } else if (hora >= 12 && hora < 18) {
        // BOA TARDE!
        imgA.style.display = 'none';
        imgB.style.display = 'block';
        imgC.style.display = 'none';
        document.body.style.background = '#b9846f';
    } else {
        // BOA NOITE!
        imgA.style.display = 'none';
        imgB.style.display = 'none';
        imgC.style.display = 'block';
        document.body.style.background = '#515154';
    }
}

Nesse exemplo, estou usando style.display para mostrar apenas a imagem correspondente ao período do dia. Certifique-se de que os IDs no HTML correspondam aos que você está usando no JavaScript.

Espero ter ajudado e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA