Função não recebe o conteúdo da variável declarada fora dela

Olá!
Sou iniciante em programação, incluindo desenvolvimento Web.
Estou tentando desenvolver um formulário de cadastro, porém não estou conseguindo fazer HTML e JavaScript trabalharem juntos.
Nesse caso específico, o JavaScript deveria receber o nome do usuário pelo input no HTML e por meio da função testador exibir este nome, porém quando a variável é declarada fora da função, simplesmente não funciona.
Primeiramente tentei utilizar somente as variáveis, depois tentei usar objetos.
Seguem meus códigos:
HTML
<label for="nome-usuario">
*Nome:
</label>
<input type="text" id="nome-usuario" name="nome" placeholder="Insira aqui seu nome">
<br>
<button type="button" onclick="testador()">
Testar
</button>
<p id="paragrafo"></p>

JavaScript (primeira versão)

let nome=document.getElementById("nome-usuario").value;
function testador() {
if(nome.length==0){
document.getElementById("paragrafo").textContent = "Não há nada aqui";
}
if (nome.length != 0) {
document.getElementById("paragrafo").textContent = "há algo aqui, o nome "+pessoa.nome;
}
}

JavaScript (segunda versão)

pessoa={
};
pessoa.nome=document.getElementById("nome-usuario").value;
function testador() {
if(pessoa.nome.length==0){
document.getElementById("paragrafo").textContent = "Não há nada aqui";
}
if (pessoa.nome.length != 0) {
document.getElementById("paragrafo").textContent = "há algo aqui, o nome "+pessoa.nome;
}
}

Ou assim:

Pessoa.prototype = new Pessoa();
Pessoa.nome = document.getElementById("nome-usuario").value