Error returns Uncaught Typeerror: Cannot read Property 'substring' of null by clicking the button

Asked

Viewed 909 times

0

I went to try to ride a script to verify the status in which the CPF was issued. However, I am unable to use the substring, it returns me the following error:

Uncaught Typeerror: Cannot read Property 'substring' of null

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script>
  function verificar(){

    var cpf = document.getElementById(cpf);

  if(cpf.substring(7,9) == "0"){

alert("Rio Grande do Sul");

}

else if(cpf.substring(7,9) == "1"){

alert(" Distrito Federal – Goiás – Mato Grosso – Mato Grosso do Sul – Tocantins ");

}
else if(cpf.substring(7,9) == "2"){

alert("  Pará – Amazonas – Acre – Amapá – Rondônia – Roraima");

}
else if(cpf.substring(7,9) == "3"){

alert(" Ceará – Maranhão – Piauí");

}
else if(cpf.substring(7,9) == "4"){

alert(" Pernambuco – Rio Grande do Norte – Paraíba – Alagoas ");

}
else if(cpf.substring(7,9) == "5"){

alert(" Bahia – Sergipe   ");

}
else if(cpf.substring(7,9) == "6"){

alert("Minas Gerais ");

}
else if(cpf.substring(7,9) == "7"){

alert("Rio de Janeiro – Espírito Santo");

}
else if(cpf.substring(7,9) == "8"){

alert("São Paulo");

}
else if(cpf.substring(7,9) == "9"){

alert("Paraná – Santa Catarina");
}
}
  </script>
  <title>CPF</title>
</head>

<body>
 <p>Informar CPF</p><input type="text" id="cpf">
 <input type="button" id="opcao" name="opcao" value="Verificar" onclick="verificar()"><br>
</body>
</html>

javascript html string substring

1 answer

1


First you are wanting to get an HTML field then you have to use your name, in case you want the field "cpf" and not the variable cpf as field name, missing quotes there. I do not know how much is just a typo or lack of understanding of what is a variable, a literal string, etc. Also need to take the property value of the element to take the value and not the whole element.

And you need to take a character and not 2 as it is.

function verificar() {
    var cpf = document.getElementById("cpf").value.substring(7, 8);
    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");
}
<p>Informar CPF</p><input type = "text" id = "cpf">
 <input type = "button" id = "opcao" name = "opcao" value = "Verificar" onclick = "verificar()"><br>

I put in the Github for future reference.

You can make it easier, but I’m not gonna make it so I don’t introduce a new concept.

Browser other questions tagged javascript html string substring

You are not signed in. Login or sign up in order to post.