- Este tópico contém 46 respostas, 10 vozes e foi atualizado pela última vez 8 meses, 3 semanas atrás por
.
-
Posts
-
-
Boa tarde, estou realizando o exercicios (perte 2) e meu script não está rodando a mudança das fotos, conforme condição solicitada.
segue abaixo meu script.js e modelo.htmlmodelo.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=”style.css”>
</head>
<body onload = “carregar()”>
<header>
<h1>Hora do dia</h1>
</header>
<section>
<div id=”msg”>
Aqui vai aparecer a mensagem
</div>
<div id=”foto”>
</div>
</section>
<footer>
<p>© CursemVideo</p>
</footer>
<script src=”script.js”> </script>
</body>
</html>script.js
function carregar() {
var msg = window.document.getElementById(‘msg’)
var img = window.document.getElementById(‘imagem’)
var data = new Date()
var hora = data.getHours()
msg.innerHTML =Agora são ${hora} horas.
if (hora >= 0 && hora < 12) {
img.src =’dia.png’
} else if (hora >= 12 && hora < 18) {
img.scr= ‘tarde.png’
}else {
img.scr=’noite.png’
}
}Preciso de ajuda para saber como resolvo esse erro, fica apenas a foto que coloco em HTML.
-
Rudiberto, este erro está ocorrendo pois no seu código é feita a busca pelo elemento com id “imagem” em
var img = window.document.getElementById('imagem'), porém não existe nenhum elemento com este id no seu HTML (<img src="noite.png" alt="Foto do dia">). Para resolver este problema adicione o id à tag de imagem e teste novamente.Espero ter ajudado, quaisquer outras dúvidas basta entrar em contato.
-
bom dia, estou tentando rodar o código, e nao está indo:
modelo.html:
<!DOCTYPE html> <html lang="pr-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> </header>0 <section> <div id='msg'> Aqui vai aparecer a mensagem... </div> <div id='foto'> <img src="tarde.png" alt="Foto do dia" /> </div> </section> <footer> <p>©Felipe Assis</p> </footer> <script src="script.js"></script> </body> </html>script.js:
function carregar(){ var msg = window.document.getElementById('msg') var res = window.document.getElementById('imagem') var data = new Date() var hora = data.getHours() msg.innerHTML=<code>Agora são ${hora} horas!</code> }if(hora >=0 && hora <12){ res.src = "manha.png" }else if(hora>=12 && hora<18){ res.src="tarde.png" }else{ res.src="noite.png" }Me ajudem!Desde de já, obrigado!
-
Felipe, movi a sua dúvida para este tópico que trata do mesmo assunto. Há uma resposta minha aqui explicando o porque deste problema acontecer, dê uma olhada nela e se ainda houver dúvidas volte a entrar em contato.
Antes de criar um tópico é sempre bom verificar se já existe um tópico sobre o assunto, utilize a barra de pesquisa no fórum para procurar por tópicos já existentes.
Espero ter ajudado, quaisquer dúvidas basta entrar em contato.
-
-
-
-
-
nao sei por que, mas quando eu comento aqui no forum, ele nao exibe o codigo da tag img, mas ela tem um id= ‘imagem
‘-
Felipe, a postagem do fórum é editada via html, por isso pode vir a interpretar algumas tags, como
imgpor exemplo que é uma das aceitas.
Para postar seu código sem problema cole-o aqui, selecione ele e clique em “code” que assim seu código sera postado com a formatação de código.
Faça esse procedimento então e nos envie novamente o seu código por favor.
-
-
Estou como um problema nesse exercicio também.
consigo roda quase todo codigo, mais na parte de carrega a imagem da tarde não vai.
vi no console do navegador o erro está dando no item – img.src = “fototarde.png”gostaria da ajuda dos colegas
-
-
<!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″>
<link rel=”stylesheet” href=”p.css”>
<script src=”p1.js”></script>
<title>Hora do Dia</title>
</head>
<body onload =”carregar()”>
<header>
<h1>Hora do dia</h1></header>
<section>
<div id=’msg’>
Aqui vai aparecer a mensagem…
</div>
<div>
</div>
</section>
<footer>
<p>© Mauro Junior</p>
</footer>
</body>
<script src=”p1.js”></script>
</html>codigo JavaScricpt :
function carregar() {
var msg = window.document.getElementById(‘msg’)
var im = window.document.getElementById(‘imagem ‘)
var data = new Date()
var hora = data.getHours()msg.innerHTML =
Agora são ${hora} horas.
if(hora >= 0 && hora < 12) {
im.src =”manha.png”
document.body.style.background = ‘cede7b’
} else if(hora >= 12 && hora <= 18) {
im.src = “tarde.png”
document.body.style.background = “green”
} else{
im.src = ‘noite.png’
document.body.style.background = ‘red’
}
} -
-
<!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">
<link rel="stylesheet" href="p.css">
<script src="p1.js"></script>
<title>Hora do Dia</title>
</head>
<body onload ="carregar()">
<header>
<h1>Hora do dia</h1></header>
<section>
<div id='msg'>
Aqui vai aparecer a mensagem...
</div>
<div>
</div>
</section>
<footer>
<p>© Mauro Junior</p>
</footer>
</body>
<script src="p1.js"></script>
</html>
-
no meu codigo a ID imagem está aonde está em “foto manha na DIV, mais quando coloquei o cod aqui não esta aparecendo.
segue o cod JavaScript
function carregar() {
var msg = window.document.getElementById(‘msg’)
var im = window.document.getElementById(‘image ‘)
var data = new Date()
var hora = data.getHours()msg.innerHTML =
Agora são ${hora} horas.
if (hora >= 0 && hora < 12) {
im.src = “manha.png”
document.body.style.background = ‘cede7b’
} else if (hora >= 12 && hora <= 18) {
im.src = “tarde.png”
document.body.style.background = “green”
} else {
im.src = ‘noite.png’
document.body.style.background = ‘red’
}
} -
-
Bom dia. Desculpe a demora.
Então Mauro. Peguei o se código e repliquei aqui.
Como aparentemente “bugou” na hora da sua postagem, a única alteração que fiz foi criar a tag IMG dentro da 2 DIV (que esta abaixo da div id=’msg’ficando assim:
<section> <div id="msg">Aqui vai aparecer a mensagem...</div> <div id=''>foto manha <img src="" alt="estação" id='image'> </div> </section>Quando faço a alteração manual da variável hora dentro do javascript (simulando os diferentes horários do dia), todas as imagens aparecem conforme o esperado.
Qual a mensagem de erro aparece no console ?
-
-
Bom dia, meu amigo
O programa roda , mais a cor do background e as fotos não mudam, conforme as horas são atualizadas.
-
-
Já li os posts anteriores e respostas, mas não consegui trocar a foto. Aguardo ajuda!
<!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>Horas do dia</title>
<link rel=”stylesheet” href=”estilo.css”>
</head>
<body onload=”carregar()”>
<header>
<h1>Hora do dia</h1>
</header>
<section><div id=”msg”>
Aqui vai aparecer a mensagem
</div>
<div id=”imagem”>
</div>
</section>
<footer>
<p> © Cursoemvideo</p>
</footer>
<script src=”script.js”></script>
</body>
</html>————————————————–
function carregar(){
var msg = window.document.getElementById(‘msg’)
var img = window.document.getElementById(‘imagem’)
var data = new Date()
var hora = data.getHours()
//var hora = 20
msg.innerHTML =Agora são ${hora} horas.
if(hora >= 0 && hora < 12){
img.src = ‘manha.png’
//BOM DIA
}else if (hora >= 12 && hora < 18){
//BOA TARDE
img.scr = ‘tarde.png’
} else{
//BOA NOITE
img.src = ‘noite.png.png’
}
} -
-
-
-
-
-
Não consigo achar o erro para as fotos não trocarem quando os horários são alterados.
<!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> </header> <section> <div id="msg"> Aqui vai aparecer a mensagem </div> <div id="foto"> <img id="imagem " src="fotomanha.png" alt="foto do dia"> </div> </section> <footer> <p>©Curso em Vídeo</p> </footer> <script src="script.js"></script> </body> </html> No Java Script function carregar() { var msg = window.document.getElementById("msg") var img = window.document.getElementById("imagem") var data = new Date() var hora = data.getHours() msg.innerHTML = <code>Agora são ${hora} horas.</code> if (hora >= 0 && hora < 12) { //Bom DIA! img.src = "fotomanha.png" } else if (hora >= 12 && hora <= 18) { //BOA TARDE! img.src = "fototarde.png" } else { //BOA NOITE! img.src = "fotonoite.png" } } -
-
Infelizmente não consigo achar o erro!
Estou perdendo tempo a 2 dias,lendo perguntas e respostas de colegas onde visivelmente o problema é outro.
Meu código parece completamente correto. Não acho o problema! Já refiz inumeras vezes!<!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> </header> <section> <div id="msg"> Aqui vai aparecer a mensagem </div> <div id="foto"> <img id="imagem " src="fotonoite.png" alt="foto do dia"> </div> </section> <footer> <p>©Curso em Vídeo</p> </footer> <script src="script.js"></script> </body> </html> No Script ficou: function carregar() { var msg = window.document.getElementById("msg") var img = window.document.getElementById("imagem") var data = new Date() var hora = data.getHours() msg.innerHTML = <code>Agora são ${hora} horas.</code> if (hora >= 0 && hora < 12) { //Bom DIA! img.src ="fotomanha.png" } else if (hora >= 12 && hora <= 18) { //BOA TARDE! img.src ="fototarde.png" } else { //BOA NOITE! img.src ="fotonoite.png" } } -
Ola Claudia, você forçou o código usando o horário de manhã, tarde e noite com o var hora = o horario que quiser ?
Exemplo:var hora = 9 var hora = 14 var hora = 19 -
-
Ola Claudia, então esta faltando a crase numa parte do seu código..
Deve ficar dessa forma:msg.innerHTML = ‘
Agora são ${hora} horas.‘ -
-
ACHEI O ERRO!!!!!!!!!!!!!!!!
Há um espaço em branco após o ID “imagem”, o que causa um erro ao tentar selecionar o elemento por meio do JavaScript usando document.getElementById(“imagem”). Para corrigir o problema, removi o espaço em branco após o ID:
Aqui em baixo, logo após a palavra “imagem” está o erro!
</div>To emocionada! Agora posso continuar o exercício hehehehe 🙂
-
-
-
Bom dia, estou tentando estilizar o background a depender da hora, e tentei usar o background-color, mas ele não funciona, o VS Code mostra que tem algo errado no sinal de “=”, usei da seguinte forma:
const carregar = () => {
var msg = document.querySelector(‘#msg’)
var img = document.querySelector(‘#img1’)
var data = new Date()
var hora = data.getHours()//var hora = 13
msg.innerHTML =
Agora são ${hora} horas.//Definir manhã, tarde e noite
if (hora >= 4 && hora< 12) {
//Bom dia!
img.src = ‘../morning2.png’
//document.body.style.background-image = ‘linear-gradient(to right, #fc9c0e, #ffb84d, #ffcc27)’ //Não funciona
document.body.style.background = ‘#ffcc27’ // Funciona
} else if (hora >= 12 && hora < 18) {
//Boa tarde
img.src = ‘../afternoom2.png’
document.body.style.background = ‘#5197ff’ //Funciona
} else {
//Boa noite
img.src = ‘../night2.png’
//document.body.style.background-image = ‘linear-gradient(to right, #191970, #4f4fc7, #7373ec)’ //Não funciona
document.body.style.background = ‘#4f4fc7’ //Funciona
}
}Como preciso escrever para que o background-color funcione?
Obrigado
-
Ola Yuander , movi a sua dúvida para este tópico que trata do mesmo assunto, de uma olhada nas explicações acima, caso não consiga resolver sua dúvida, só retornar ao fórum que iremos lhe ajudar.
-
-
A propriedade background-image é aplicada a todos os elementos HTML, ou seja, todos eles podem adicionar uma imagem de fundo para modificar sua aparência. Entretanto, o padrão é que não exista nenhuma associação definida. Seu valor inicial é definido como none. É possível aplicar como imagem de fundo boa parte dos formatos utilizados, por exemplo: JPG, PNG, SVG, GIF etc.
Vale ressaltar que, ao aplicar uma imagem como background, é importante utilizar uma propriedade auxiliar, como a background-color, para substituir a imagem caso ocorra alguma falha em seu carregamento. Isso é indicado para evitar, por exemplo, problemas de contrastes entre a cor de fundo e a cor da fonte, caso seja um elemento que contenha texto.
-
Na verdade consegui agora, vi que na parte 3 do exercício o Guanabara usa uma propriedade do CSS (text-align) no JS da seguinte forma: textAlign.
Tentei ver se seria essa a forma de escrever no JavaScript e funcionou, no caso, a linha fica assim:
document.body.style.backgroundImage = ‘linear-gradient(to right, #191970, #4f4fc7, #7373ec)’
HTML:
<body onload=”carregar()”>
<header>
<h1>Hora do dia</h1>
</header><section>
<div id=”msg”>
Aqui vai aparecer a mensagem
</div>
<div id=”foto”>
</div>
</section><footer>
<p>© Yuander</p>
</footer><script src=”script.js”></script>
</body>
SCRIPT:
//Funções
//Carregar data e hora
const carregar = () => {
var msg = document.querySelector(‘#msg’)
var img = document.querySelector(‘#img1’)
var data = new Date()
var hora = data.getHours()//var hora = 19
msg.innerHTML =
Agora são ${hora} horas.//Definir manhã, tarde e noite
if (hora >= 4 && hora< 12) {
//Bom dia!
img.src = ‘midia/morning2.png’
document.body.style.backgroundImage = ‘linear-gradient(to right, #fc9c0e, #ffb84d, #ffcc27)’
} else if (hora >= 12 && hora < 18) {
//Boa tarde
img.src = ‘midia/afternoom2.png’
document.body.style.backgroundImage = ‘linear-gradient(to right, #ffb412, #5197ff, #7aafff)’
} else {
//Boa noite
img.src = ‘midia/night2.png’
document.body.style.backgroundImage = ‘linear-gradient(to right, #191970, #4f4fc7, #7373ec)’
}
}Escrevendo dessa forma funcionou.
😀
Obrigado.
-
-
-
Olá, tudo bem?
Meu programa não muda a tela do HTML. Ele estava rodando até chegar os “IFs” do JavaScript.Já visitei os comentários dos colegas e não encontrei a solução para o meu impedimento.
HTML:
<!DOCTYPE html>
<html lang=”pt-br”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Hora Automática</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body onload=”carregar()”>
<header>
<h1>Hora Automática</h1>
</header>
<section>
<div id=”msg”>
Aqui vai paracer a mensagem!
</div>
<div id=”imagem”>
</div>
</section>
<footer><p>© MR</p></footer>
<script src=”script.js”></script>
</body>
</html>JS
function carregar(){
var msg = document.getElementById(‘msg’)
var img = document.getElementById(‘imagem’)
var data = new Date()
var hora = data.getHours()
msg.innerHTML=Neste momento, a hora é: ${hora} horas.if (hora >= 0 && hora < 12) {
img.src=”dia.png”
} else if (hora >= 12 && < 18){
img.src=”tarde.png”
} else {
img.src=”noite.png”
}
}Poderiam ajudar?
-
-
” so que no código, quando copiei e colei aqui, ele so exibiu o “alt”
- Você deve fazer login para responder a este tópico.