Horário atual com JS

Front-end JavaScript
#1

Sou inciante em js. Quero fazer um box no header do meu site com a hora atual e uma imagem indicando se é dia/ tarde/ noite, porém n estou conseguindo que a hora apareça ao lado da imagem.

function carregar(){
var img = window.document.getElementById('msg')
var img = window.document.getElementById('imagem')
var data = new Date()
var hora = data.getHours()
msg.innerHTML = `${hora} h.`

if (hora >= 0 && hora < 12){
    // dia!
    img.src = 'assets/img/dia.png'
    
} else if (hora >= 12 && hora < 18){
    // tarde!
    img.src = 'assets/img/tarde.png'
    
} else{
    //noite!
    img.src = 'assets/img/noite.png'
    
   }
}

<section id="hora-dia" onload="carregar()">
    
            <div id="msg">
        
            </div>

            <div id="foto">
                <img  id="imagem" src="assets/img/dia.png"  alt="Foto dia">
                
            </div>

        </section>
#2

vc esqueceu de trocar o nome dessa variavel pra msg, não ta trocando justamente pq a variavel “msg” ainda não existe nesse escopo aí.

Vc pode trocar esse innerHTML pra innerText, vc quer trocar só o texto e não inserir um html aí.

Não precisa usar o window também, pode colocar só o document.getElementById(...) que já da certo

1 curtida
#3

Tentei desta forma que falou (substituindo o innerHTML por innerText; img por msg no Id) e ainda não deu. Continua aparecendo só a imagem. :pensive

#4

mostra o código aí.

Montei esse exemplo pra vc ver la no JSFiddle:

https://jsfiddle.net/bdz5n6h4/6/

#5 
function carregar(){
var msg = document.getElementById('msg')
var img = document.getElementById('imagem')
var data = new Date()
var hora = data.getHours()
msg.innerText = `${hora} h.`

if (hora >= 0 && hora < 12){
    // dia!
    img.src = 'assets/img/dia.png'
    
} else if (hora >= 12 && hora < 18){
    // tarde!
    img.src = 'assets/img/tarde.png'
    
} else{
    //noite!
    img.src = 'assets/img/noite.png'
    
   }
}





        </div>

        <div id="foto">

            <img  id="imagem" src="assets/img/dia.png"  alt="Foto dia">

        </div>

    </section>
#6

Meu CSS dessa parte está assim: as vezes ele pode ter sido o problema.

section#hora-dia {
  background-image: linear-gradient(to bottom, var(--cor1), var(--cor2), var(--cor4));
  width: 180px;
  height: 50px;
  border: 0px;
  border-radius: 0px;
  padding: 7px;
  
}


img#imagem {
  width: 50px;
  height: 45px;
  display: block;
  float: right;
}
#7

tira todo o css, só pra a gente ver como vai ficar

#8

Então, eu tirei todo css e fiz um novo doc só com a parte que está dando erro. Funcionou, a hr aparece. Agora não consigo entender pq no outro doc completo n está funcionando, sendo q tbm tirei nele todo css e só o que aparece é a imagem.
teste no doc completo Sem título
teste Sem título2

#9

po, aí teria que ver na integra mesmo, consegue me mandar o arquivo? ou subir no github?