SetTimeout - funciona mas não repete todas as statements da função - Erro estranho!

[Thiago2018 0]

var objectData = new Date();

window.addEventListener('click', relogio, false);

var hora = objectData.getHours();
var minutos = objectData.getMinutes();
var segundos = objectData.getSeconds();

function relogio() {
    
    console.log("Função executada com sucesso!");

    hora = objectData.getHours();
    minutos = objectData.getMinutes();
    segundos = objectData.getSeconds();

    if(segundos < 10) {
        segundos = '0' + segundos;
    }

    if(minutos < 10) {
        minutos = '0' + minutos;
    }

    if(hora < 10) {
        hora = '0' + hora;
    }

    document.getElementById("painel").innerHTML = hora + ":" + minutos + ":" + segundos;

    setTimeout(relogio, 1000);

}

 

O código acima está repetindo corretamente. Isso é verificado no console através da mensagem "Função executada corretamente". Porém não atualiza o relógio! Como isso é possível se antes tudo foi testado e o relógio escreve na tela de boa. Alguém que enxergue onde está o erro, pode me ajudar?

[wootzor 103]

Experimenta assim:

window.onload = relogio;

function relogio() {
    var objectData = new Date();
    //console.log("Função executada com sucesso!");
    hora = objectData.getHours();
    minutos = objectData.getMinutes();
    segundos = objectData.getSeconds();
    if(segundos < 10) {
        segundos = '0' + segundos;
    }
    if(minutos < 10) {
        minutos = '0' + minutos;
    }
    if(hora < 10) {
        hora = '0' + hora;
    }
    document.getElementById("painel").innerHTML = hora + ":" + minutos + ":" + segundos;
    setTimeout(relogio, 1000);
}

 

[Thiago2018 0]

Valeu, wootzor! O seu código funcionou! Você só esqueceu de adicionar a palavra reservada "var" antes das variáveis hora, minutos e segundos dentro da função. E também, é bom explicar o porquê de o erro estar acontecendo, para que não somente eu, mas outras pessoas possam aprender.

Obrigado pela ajuda!

[wootzor 103]

Tens razão. Retirei as variáveis globais e esqueci-me de as declarar dentro da função.

 

Tirando isso, a minha única alteração foi substituir o evento click na página pelo onload, que chama a função assim que a página é carregada.