Nao muda de imagem
27/08/2019
0
ola!!!
eu estou a fazer um exercicio que consiste em recolher a hora do meu computador e para cada intervalo de tempo que eu escolhi, a imagem tem que mudar. Mas o unico problema é que a imagem nao esta a mudar.
Segue o codigo implementado
function Carregar(){
let mensagem=document.getElementById('msg');
var foto=document.getElementById('foto');
let data=new Date();
let hora=data.getHours();
//hora=5
mensagem.innerHTML=`Agora sao $ horas!!!`
if (hora>=0&&hora<12){
foto.src='images/manha.png'
}
else if(hora>=12&&hora<18){
foto.src='images/tarde.png'
}
else{
foto.src='images/noite.png'
}
}
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hora do dia</title>
<link rel="stylesheet" href="style.css">
</head>
<body onload="Carregar()">
<header>
<h1>Hora do dia</h1>
</header>
<section>
<div id="msg">
</div>
<div id="foto">
<img src="images/manha.png" style="border-radius: 50%" width="250" height="250" alt="Foto da manha">
</div>
</section>
<footer>
<p>© Modelo de exercicio</p>
</footer>
</body>
<script src="funcoes.js"></script>
</html>
eu estou a fazer um exercicio que consiste em recolher a hora do meu computador e para cada intervalo de tempo que eu escolhi, a imagem tem que mudar. Mas o unico problema é que a imagem nao esta a mudar.
Segue o codigo implementado
function Carregar(){
let mensagem=document.getElementById('msg');
var foto=document.getElementById('foto');
let data=new Date();
let hora=data.getHours();
//hora=5
mensagem.innerHTML=`Agora sao $ horas!!!`
if (hora>=0&&hora<12){
foto.src='images/manha.png'
}
else if(hora>=12&&hora<18){
foto.src='images/tarde.png'
}
else{
foto.src='images/noite.png'
}
}
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hora do dia</title>
<link rel="stylesheet" href="style.css">
</head>
<body onload="Carregar()">
<header>
<h1>Hora do dia</h1>
</header>
<section>
<div id="msg">
</div>
<div id="foto">
<img src="images/manha.png" style="border-radius: 50%" width="250" height="250" alt="Foto da manha">
</div>
</section>
<footer>
<p>© Modelo de exercicio</p>
</footer>
</body>
<script src="funcoes.js"></script>
</html>
Jose
Curtir tópico
+ 0
Responder
Posts
28/08/2019
Rodolfo Gomes
ola!!!
eu estou a fazer um exercicio que consiste em recolher a hora do meu computador e para cada intervalo de tempo que eu escolhi, a imagem tem que mudar. Mas o unico problema é que a imagem nao esta a mudar.
Segue o codigo implementado
function Carregar(){
let mensagem=document.getElementById('msg');
var foto=document.getElementById('foto');
let data=new Date();
let hora=data.getHours();
//hora=5
mensagem.innerHTML=`Agora sao $ horas!!!`
if (hora>=0&&hora<12){
foto.src='images/manha.png'
}
else if(hora>=12&&hora<18){
foto.src='images/tarde.png'
}
else{
foto.src='images/noite.png'
}
}
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hora do dia</title>
<link rel="stylesheet" href="style.css">
</head>
<body onload="Carregar()">
<header>
<h1>Hora do dia</h1>
</header>
<section>
<div id="msg">
</div>
<div id="foto">
<img src="images/manha.png" style="border-radius: 50%" width="250" height="250" alt="Foto da manha">
</div>
</section>
<footer>
<p>© Modelo de exercicio</p>
</footer>
</body>
<script src="funcoes.js"></script>
</html>
eu estou a fazer um exercicio que consiste em recolher a hora do meu computador e para cada intervalo de tempo que eu escolhi, a imagem tem que mudar. Mas o unico problema é que a imagem nao esta a mudar.
Segue o codigo implementado
function Carregar(){
let mensagem=document.getElementById('msg');
var foto=document.getElementById('foto');
let data=new Date();
let hora=data.getHours();
//hora=5
mensagem.innerHTML=`Agora sao $ horas!!!`
if (hora>=0&&hora<12){
foto.src='images/manha.png'
}
else if(hora>=12&&hora<18){
foto.src='images/tarde.png'
}
else{
foto.src='images/noite.png'
}
}
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hora do dia</title>
<link rel="stylesheet" href="style.css">
</head>
<body onload="Carregar()">
<header>
<h1>Hora do dia</h1>
</header>
<section>
<div id="msg">
</div>
<div id="foto">
<img src="images/manha.png" style="border-radius: 50%" width="250" height="250" alt="Foto da manha">
</div>
</section>
<footer>
<p>© Modelo de exercicio</p>
</footer>
</body>
<script src="funcoes.js"></script>
</html>
Fala José, blz?
Então vc precisa apenas realizar uma modificação em seu código HTML, pois toda a estrutura esta correta.
Quando vc abriu uma Div para colocar a tag img ao invés de por o ID na Div é necessário colocar na tag img, desta maneira
<img id="foto" src="images/manha.png" style="border-radius: 50%" width="250" height="250" alt="Foto da manha">
Pois da maneira que estava o JavaScript não conseguia identificar onde alterar a imagem tentando alterar diretamente na div, e fazendo essa modificação ele irá alterar certinho as imagens ;)
Qualquer dúvida é só falar
abração!
Responder
28/08/2019
Jose
ola!!!
eu estou a fazer um exercicio que consiste em recolher a hora do meu computador e para cada intervalo de tempo que eu escolhi, a imagem tem que mudar. Mas o unico problema é que a imagem nao esta a mudar.
Segue o codigo implementado
function Carregar(){
let mensagem=document.getElementById('msg');
var foto=document.getElementById('foto');
let data=new Date();
let hora=data.getHours();
//hora=5
mensagem.innerHTML=`Agora sao $ horas!!!`
if (hora>=0&&hora<12){
foto.src='images/manha.png'
}
else if(hora>=12&&hora<18){
foto.src='images/tarde.png'
}
else{
foto.src='images/noite.png'
}
}
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hora do dia</title>
<link rel="stylesheet" href="style.css">
</head>
<body onload="Carregar()">
<header>
<h1>Hora do dia</h1>
</header>
<section>
<div id="msg">
</div>
<div id="foto">
<img src="images/manha.png" style="border-radius: 50%" width="250" height="250" alt="Foto da manha">
</div>
</section>
<footer>
<p>© Modelo de exercicio</p>
</footer>
</body>
<script src="funcoes.js"></script>
</html>
eu estou a fazer um exercicio que consiste em recolher a hora do meu computador e para cada intervalo de tempo que eu escolhi, a imagem tem que mudar. Mas o unico problema é que a imagem nao esta a mudar.
Segue o codigo implementado
function Carregar(){
let mensagem=document.getElementById('msg');
var foto=document.getElementById('foto');
let data=new Date();
let hora=data.getHours();
//hora=5
mensagem.innerHTML=`Agora sao $ horas!!!`
if (hora>=0&&hora<12){
foto.src='images/manha.png'
}
else if(hora>=12&&hora<18){
foto.src='images/tarde.png'
}
else{
foto.src='images/noite.png'
}
}
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hora do dia</title>
<link rel="stylesheet" href="style.css">
</head>
<body onload="Carregar()">
<header>
<h1>Hora do dia</h1>
</header>
<section>
<div id="msg">
</div>
<div id="foto">
<img src="images/manha.png" style="border-radius: 50%" width="250" height="250" alt="Foto da manha">
</div>
</section>
<footer>
<p>© Modelo de exercicio</p>
</footer>
</body>
<script src="funcoes.js"></script>
</html>
Fala José, blz?
Então vc precisa apenas realizar uma modificação em seu código HTML, pois toda a estrutura esta correta.
Quando vc abriu uma Div para colocar a tag img ao invés de por o ID na Div é necessário colocar na tag img, desta maneira
<img id="foto" src="images/manha.png" style="border-radius: 50%" width="250" height="250" alt="Foto da manha">
Pois da maneira que estava o JavaScript não conseguia identificar onde alterar a imagem tentando alterar diretamente na div, e fazendo essa modificação ele irá alterar certinho as imagens ;)
Qualquer dúvida é só falar
abração!
Muito obrigado Rodolfo.
forte abraço
Responder
Clique aqui para fazer login e interagir na Comunidade :)
