Jump to content
stefanyprs

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

Recommended Posts

//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-coloraqua;
    fontnormal 15pt Arial;
}
header{
    color:rgb(255255255);
    text-aligncenter;
}
section{
    backgroundwhite;
    border-radius10px;
    padding15px;
    width500px;
    margin:auto;
    box-shadow5px 5px 10px rgba(0000.329);
    
}
footer{
    color:white;
    text-aligncenter;
    font-styleitalic;
 
}
div{
    text-aligncenter;
}
.imagem{
    width500px;    /* largura da imagem */
    height350px;   /*  altura da imagem  */
    margin-top10px/* margem do topo */
}

Share this post


Link to post
Share on other sites

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

  • Similar Content

    • By zuuzu
      Olá, estou desenvolvendo uma api para download de fotos/videos/gif, eu consegui fazer tudo certinho, mas na hora de gerar um link de download aleatório ele gera sempre o mesmo, só gera um link diferente se eu reiniciar o servidor, queria que gerasse um link diferente sempre que eu reiniciasse a página, sem precisar reiniciar o servidor. Tem como alguém me ajudar com isso? *A api está sendo desenvolvida para a automatização de download de fotos/videos/gif*

    • By Carcleo
      Tenho o seguinte:   const http = require("http") const host = "localhost" const port = "80" const Config = require("./Config") const server = http.createServer() server.on('request', (request, response) => { response.writeHead(200, {"Content-Type": "text/html; charset=utf-8"}) const { headers, method, url } = request Config.has("/", Config.home) response.end() }); server.listen(port, host)   Preciso arranjar uma forma de na Classe config, obter o headers mas sem passar ele via construtor tipo   New Config (headers)   dentro de    server.on()   Tentei, na classe Config importar o http novamente mas parece que só consigo o headers dentro do server    Alguma saída?
    • By clovis.sardinha
      Pessoal, não tenho certeza se coloco a dúvida aqui ou no html. Envolve os dois. 
      Eu tenho um site muito antigo, php 5.2, e resolvi mudar a página principal colocando um efeito parallax.
      No servidor local o site roda normalmente, mas no servidor da localweb as imagens do parallax não aparecem.
      a página mostrada é esta:
      <div class="container-fluid"> <!-- começo do parallax --> <div class="caixa1"> <div class="conteudo-titulo"> <!-- <span class="titulo">TECNOCLEAN - SEGURANÇA E EFICIÊNCIA</span> --> </div> </div> <div class="conteudo"> <h3>A EMPRESA</h3> <p style="width: 80%; margin: auto; text-align: justify;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida dolor sed mattis mollis. Morbi sodales euismod rhoncus. Suspendisse potenti. Integer hendrerit vitae lectus at feugiat. Quisque libero neque, imperdiet a est congue, elementum ultrices diam. Sed ut felis scelerisque, volutpat justo ut, congue quam. Ut non vestibulum erat, vel semper dolor. Nulla facilisi. Sed convallis at lacus quis venenatis..<br> </p> </div> <div class="caixa2"> <div class="conteudo-titulo" > <!-- <span class="titulo">NOSSO DIFERENCIAL</span> --> </div> </div> <div > <div> <ul class="list-group list-group-flush text-center font-weight-bold"> <li class="list-group-item"><h3>Tradição</h3> 26 anos de experiência</li> <li class="list-group-item"><h3>Confiabilidade</h3> mais de mil clientes</li> <li class="list-group-item"><h3>Segurança</h3> técnica e equipamentos</li> <li class="list-group-item"><h3>Garantia</h3> produtos de qualidade</li> <li class="list-group-item"><h3>Rapidez</h3> equipe especializada</li> </ul> </div> </div> <div class="caixa3"> <div class="conteudo-titulo"> <!-- <span class="titulo">CLIENTES</span> --> </div> </div> <div class="caixa4"> <div class="conteudo-titulo"> <!-- <span class="titulo">EQUIPAMENTOS</span> --> </div> </div> </div> </div> </div> O Css é este:
      /* Efeito Parallax -------------------------------*/ .caixa1, .caixa2, .caixa3, .caixa4 { position: relative; height: 100%; opacity: 0.9; background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; } .caixa1 { background-image:url(../imagens/principal.png); } .caixa2 { background-image: url(../imagens/insetos.png); } .caixa3 { background-image: url(../imagens/logos/clientes.png); } .caixa4 { background-image: url(../imagens/equipamentos.png); } .conteudo-titulo { position: absolute; left: 0; top: 45%; width: 100%; text-align: center; } .conteudo-titulo span.titulo { color: #fff; background-color: #111; padding: 18px; font-size: 25px; letter-spacing: 5px; text-transform: uppercase; }  
      Coloquei o arquivo com a estrutura do site e o erro que aparece na url. (um css que não deveria aparecer e dá página não encontrada)
      Coisa interessante: tanto faz colocar ../imagens/foto.png  ou imagens/foto.png e funciona no local e não no servidor.
      Se alguém tiver alguma dica para eu resolver ou testar este erro, agradeço.
       
       

       

    • By Sapinn
      A um bom tempo atrás eu encontrei um site que dava pra mudar a cor do layout. Então eu resolvi adicionar essa propriedade em um site que estou desenvolvendo, mas não sei bem como fazer isso. Eu criei uma variável no meu arquivo css pra colocar uma cor padrão para o site então eu gostaria que o usuário quando apertasse em um palheta de cores visse como o site ficaria caso ele gostasse ele apertaria em mudar cor e essa nova cor seria a padrão do site. Eu fiz algumas buscas mas não encontrei muita coisa, infelizmente. Se alguém pudesse me ajudar eu ficaria grato. Vlw
    • By Wanderson Moreira
      Opa, blz?
      Alguém me da um help?
       
      Estou criando um relatorio em PDF com o dompdf e ao adicionar algumas imagens no documento, as mesmas saem deitadas.
       
      No html as fotos saem com a orientação normal(em pé) conforme foi inserida
       
      alguém sabe o que pode ser?
×

Important Information

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