Eu reparei que o exemplo não funcionaria se a minha tag script estivesse entre <head></head> do meu html.
Fazendo isso ele carrega o script JS primeiro e não identifica os elementos por ID.
É somente uma observação.
1
resposta
resposta
Tag script no head
Boa observação Edgar. Por isso é uma boa pratica adicionar nossos scripts ao fim da tag body ;)
Colocando no fim do body os elementos principais da página (e mais relevantes) já podem ser renderizados antes do termino de verificação e interpretação das partes em JavaScript.
Se o código for colocado no começo ou no meio, a renderização da página fica obstruída até que todo o script seja analisado, gerando gargalo no processamento da página!
Abraço e bons estudos!