Ir para conteúdo
stefanyprs

Não estou conseguindo mudar a imagem de acordo com a hora apresentada no if/else.

Por , em Javascript

Recommended Posts

stefanyprs    0

stefanyprs
Postado
//modelo.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hora do dia</title>
    <link rel="stylesheet" href="estilo.css">
</head>
<body onload="carregar()">
    <header>
        <h1> Hora do dia </h1>
        </h1>
    </header>
    <section>
        <div id="msg">
            msg
        </div>
        <div id="foto">
            <img class="imagem" src="fotomanha.jpg" alt="foto do dia">
        </div>
    </section>
    <footer>
        <p>&copy; Rodapé </p>
    </footer>
    <script src="script.js"></script>
</body>
</html>
 
//script.js
function carregar () {
    var msg = window.document.getElementById('msg')
    var img  = window.document.getElementsByClassName('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 = 'fotomanha.jpg'
        } else if (hora >= 12 && hora < 18){
        //Boa tarde
        img.src = 'fototarde.jpg'
     } else {
        //Boa noite
        img.src = 'fotonoite.jpg'
    }
}
 
//estilo.css
body{
    background-color: aqua;
    font: normal 15pt Arial;
}
header{
    color:rgb(255, 255, 255);
    text-align: center;
}
section{
    background: white;
    border-radius: 10px;
    padding: 15px;
    width: 500px;
    margin:auto;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.329);
    
}
footer{
    color:white;
    text-align: center;
    font-style: italic;
 
}
div{
    text-align: center;
}
.imagem{
    width: 500px;    /* largura da imagem */
    height: 350px;   /*  altura da imagem  */
    margin-top: 10px; /* margem do topo */
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Matheus Tavares    167

Matheus Tavares
Postado

Olá @stefanyprs, tudo bem?

 

Seu código está bem perto de funcionar como você gostaria, mas observe as seguintes linhas: 

var msg = window.document.getElementById('msg')
var img  = window.document.getElementsByClassName('imagem');

Percebe que a primeira função está no singular?

getElementById => Pegar elemento pelo id.

getElementsByClassName => Pegar elementos pelo nome de classe.

 

Isso significa que o retorno deve ser um array, ou seja, um conjunto de elementos, e não apenas 1, como na primeira função.

 

Para evitar lidar com esse problema, o ideal é você adicionar um id na imagem e selecioná-la através de seu id, como em msg.

Outra forma de fazer isso é acessando o primeiro elemento do conjunto (apenas por se tratar do único elemento com classe imagem). Isso você faz assim: 

var img  = window.document.getElementsByClassName('imagem')[ 0 ];

 

Se tivesse mais elementos, você acessaria alterando o índice dentro dos colchetes.

 

Outro detalhe é que não precisa do window.document. É uma redundância para apenas document.

Então poderia ser escrito assim também: 

var msg = document.getElementById('msg')
var img  = document.getElementsByClassName('imagem')[ 0 ];

 

Veja em funcionamento: https://jsfiddle.net/Lvpc0wfk/1/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • juniormatrix
      Script para validação
      Por juniormatrix
      Olá
       
      Achei esse script aqui no fórum mesmo:
       
      $.validator.addMethod( "customEmail", function (value, element) { return this.optional(element) || /^[\w-\.]+@fulano\.com\.br$/i.test(value); }, "Por favor, insira um e-mail válido com o domínio @fulano.com.br" ); $("#formulario").validate({ ignore: ".ignore", rules: { empresa: { required: true }, nome: { required: true }, contato: { required: true }, celular: { required: true }, email: { required: true, email: true, customEmail: true }, }, }); Testei e funcionou perfeitamente, mas gostaria que liberasse mais e-mails válidos, ao invés de apenas um.

      Tem como fazer? 
       
      Se alguém puder ajudar, fico muito grato.
    • Alessandro Bodão
      Projeto de Branding
      Por Alessandro Bodão
      Salve galerinha, passando pra mostrar pra vocês o novo projeto de marca que a Jatobá Estúdio desenvolveu, espero que gostem.   https://www.behance.net/gallery/166555627/Fernanda-Pinheiro-Nutricionista-Esportiva
    • rogerblower
      Qual calendário free usar?
      Por rogerblower
      Boas pessoal, estou precisando de um calendário para agenda com crud para agendamento, mas teria que ser free.
      Obrogado.
    • mateus.andriollo
      IF e array [RESOLVIDO]
      Por mateus.andriollo
      Existe uma forma de fazer um IF na select e comparar com Array de dados?
       
      algo como
       
      Select if( in_array(idCliente,'1,2,3,4,5')=true,'Tem','Não') ) as cliente Não consigo usar inner ou where pois esse array é algo q tem varias regras...
       
      Precisava saber se existe uma função assim em MySQL
    • mateus.andriollo
      IF e array [RESOLVIDO]
      Por mateus.andriollo
      Existe uma forma de fazer um IF na select e comparar com Array de dados?
       
      algo como
       
      Select if( in_array(idCliente,'1,2,3,4,5')=true,'Tem','Não') ) as cliente Não consigo usar inner ou where pois esse resultado do array é algo q tem varias regras...
       
      Precisava saber se existe uma função assim em MySQL
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito