Jump to content

POWERED BY:

stefanyprs

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

By stefanyprs, in Javascript

Recommended Posts

stefanyprs    0

stefanyprs
Posted
//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 */
}

Share this post

Link to post
Share on other sites

Matheus Tavares    167

Matheus Tavares
Posted

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/

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Go To Topic Listing Javascript

  • Similar Content

    • juniormatrix
      Script para validação
      By 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
      By 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?
      By 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]
      By 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]
      By 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
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.

  I accept