Tenha em mente que o JavaScript é case sensitive, ou seja, diferencia letras maiúsculas e minúsculas: a
é diferente de A
. Qualquer caractere com o case errado causa erro (de sintaxe, não acha um objeto etc.).
Problemas encontrados:
1. function Relogio{
Após o nome da função deve seguir os parênteses: function Relogio(){
2. relógio()
vs. Relogio()
Note que no onload
do body
o nome da função é tudo em minúsculo, e o nome da função inicia-se com "R" maiúsculo. Ou você muda um ou outro para que ambos sejam iguais.
3. var data = new Data();
A sintaxe está incorreta. O correto é Date()
(em inglês).
4. var minutos = data.getminutes ();
Um problema de case. O JavaScript geralmente usa o estilo camel case quando um nome de propriedade ou método é composto: get
+ minutes
= getMinutes
.
5. var segundos = data.getseconds();
Mesmo problema do item anterior.
6. document.getElementByid("relogio").innerHTML
Mais um problema de case que causa erro de sintaxe. Lembra do camel case
? O correto é o id
começar com "i" maiúsculo: document.getElementById
.
Só faltou o elemento onde você deseja imprimir o relógio. Pelo .innerHTML
do código, supõe-se ser uma div
com id
#relogio
. Insira-a no body
:
<div id="relogio"></div>
Caso queira um temporizador para que o relógio não fique estático, usa-se o setInterval()
(temporizador ininterrupto que executa uma função no intervalo estipulado em milissegundos).
Como você está chamando a função via onload
, neste caso, pode colocar o setInterval()
no fim da função relogio()
, desta forma:
setInterval(relogio, 1000); // 1000 = 1 segundo
Outro ponto importante (para iniciantes e experientes) é referente à indentação do código. Um código bem indentado torna-o mais legível e facilita bastante a manutenção, principalmente em códigos longos (saiba mais neste link).
Para estudar:
Código corrigido:
function relogio(){
var data = new Date();
var horas = data.getHours();
var minutos = data.getMinutes ();
var segundos = data.getSeconds();
if (horas <10 ) {
horas= "0"+ horas;
}
if (minutos <10) {
minutos = "0"+ minutos;
}
if (segundos <10) {
minutos = "0"+segundos;
}
document.getElementById("relogio").innerHTML =horas+":"+minutos+":"+segundos;
setInterval(relogio, 1000);
}
<body onload="relogio();">
<div id="relogio"></div>
</body>
E finalmente: se está usando HTML5, não precisa declarar type="text/javascript"
no script.