0

Quero criar uma extensão para Google chrome que verifique o estado de emissão de um CPF, mas não consigo fazer com que o botão execute a função. Como faço para que ele consiga executar?

document.addEventListener('DOMContentLoaded', function verificar(){

document.querySelector('#btn').addEventListener('click', function verificar(){

    var cpf = document.getElementById("cpf").value.substring(8, 9);

})

    function verificar() {
        var cpf = document.getElementById("cpf").value.substring(8, 9);
        if (cpf == "0") alert("Rio Grande do Sul");
        else if (cpf == "1") alert(" Distrito Federal – Goiás – Mato Grosso – Mato Grosso do Sul – Tocantins ");
        else if (cpf == "2") alert("  Pará – Amazonas – Acre – Amapá – Rondônia – Roraima");
        else if (cpf == "3") alert(" Ceará – Maranhão – Piauí");
        else if (cpf == "4") alert(" Pernambuco – Rio Grande do Norte – Paraíba – Alagoas ");
        else if (cpf == "5") alert(" Bahia – Sergipe   ");
        else if (cpf == "6") alert("Minas Gerais ");
        else if (cpf == "7") alert("Rio de Janeiro – Espírito Santo");
        else if (cpf == "8") alert("São Paulo");
        else if (cpf == "9") alert("Paraná – Santa Catarina");
    }
})
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <script src="cpfteste.js"></script>
    <title>CPF</title>
</head>
<body>
    <input id="cpf" type="text">
   <button id="btn">Verificar</button>
   <div id="res">


   </div>
</body>
</html>

2 Respostas 2

0

Vinicius, você se complicou um pouco quando declarou as funções para os EventListeners.

Como sua função verificar já existe, você pode passar ela como callback para o EventListeners, dessa forma seu botão passa a chamar a função verificar quando clicado.

Quanto ao outro EventListener (DOMContentLoaded), não sei se ele ainda será necessário, deixei ele comentado para você ver que a sintaxe seria a mesma.

//Remova esses comentários caso queira que a função verificar seja chamada também no momento de loaded da página, porém ela será disparada sem que o usuário faça qualquer coisa
//document.addEventListener('DOMContentLoaded', verificar);

document.querySelector('#btn').addEventListener('click', verificar);

function verificar() {
    let cpf = document.getElementById("cpf").value.substring(8, 9);

    if (cpf == "0") alert("Rio Grande do Sul");
    else if (cpf == "1") alert(" Distrito Federal – Goiás – Mato Grosso – Mato Grosso do Sul – Tocantins ");
    else if (cpf == "2") alert("  Pará – Amazonas – Acre – Amapá – Rondônia – Roraima");
    else if (cpf == "3") alert(" Ceará – Maranhão – Piauí");
    else if (cpf == "4") alert(" Pernambuco – Rio Grande do Norte – Paraíba – Alagoas ");
    else if (cpf == "5") alert(" Bahia – Sergipe   ");
    else if (cpf == "6") alert("Minas Gerais ");
    else if (cpf == "7") alert("Rio de Janeiro – Espírito Santo");
    else if (cpf == "8") alert("São Paulo");
    else if (cpf == "9") alert("Paraná – Santa Catarina");
}
<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <title>CPF</title>
    </head>
    <body>
       <input id="cpf" type="text">
       <button id="btn">Verificar</button>
       <div id="res">
       </div>
    </body>
</html>

https://developer.mozilla.org/pt-BR/docs/Web/API/Element/addEventListener

6
  • Realizei a alteração que você indicou, sem o DOMContentLoader, porém agora o erro que ele retorna é "Uncaught TypeError: Cannot read property 'addEventListener' of null at cpfteste.js:4" O será que pode ser dessa vez?
    – Vinicius
    Commented 13/10/2019 às 17:22
  • Seu querySelector não encontrou o botão no DOM, você colocou o id no botão? Faça um console.log(document.querySelector('#btn')) Commented 13/10/2019 às 17:52
  • Eu coloquei sim, "<button id="btn" >Verificar</button> " Desculpa, eu ainda estou começando a entender melhor o JS, como funciona esse procedimento de console.log?
    – Vinicius
    Commented 13/10/2019 às 18:27
  • O console.log apenas exibe o valor no console, tente utilizar o document.getElementById("btn") Commented 13/10/2019 às 18:36
  • Tentei com o getElementById, mas ainda da o mesmo erro, pelo console de extensões do google a mensagem é a seguinte: Uncaught TypeError: Cannot read property 'addEventListener' of null Contexto index.html Rastreamento de pilha cpfteste.js:1 (função anônima) "document.getElementById("btn").addEventListener('click', verificar);"
    – Vinicius
    Commented 13/10/2019 às 18:56
0

Como tu já tem a função verificar() criada, no addEventListener tu só precisa escrever o nome da função (sem os parênteses) para passar ela como callback. O que acontece é que tu criou outra função lá, e essa nova função criada que está sendo chamada.

document.querySelector('#btn').addEventListener('click', verificar);

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .