CODEWITHSUNDEEP
javascriptgetelementbyidgetattribute
Toni Cesar A. Amaral
Toni Cesar A. Amaral

Reputation: 39

Uncaught TypeError: Cannot call method 'toString' of null

I'm trying to create a class in JavaScript to validate a form. That'll check the form elements and validate a field if it has a specific attribute.

However, the call to getAttribute isn't returning a value. It doesn't get the value inside another variable, but, if I print, it works well.

Here's the code for my class:

function valida() {
    document.getElementById("msgDiv").innerHTML="";
    var totalErros=0; 
    var x=document.getElementById("frm1");
    for (var i=0;i<x.length;i++){
        var input=document.getElementsByTagName("input")[i];
        var campo=input.getAttribute("id");
        var tipo=input.getAttribute("tipo");
        var nome=input.getAttribute("nome");
        var id=campo.toString(); //the error goes here
        //var valor=_$(id).value;
        alert(campo);

        switch (tipo) {
            case "obrigatorio":
                if(document.getElementById(id).value==""){
                    document.getElementById("msgDiv").innerHTML+="Deu erro no campo "+nome+"<br />"; 
                    totalErros++;}
                    break
            case "oemail":
                if(document.getElementById(id).value==""){
                    document.getElementById("msgDiv").innerHTML+="Deu erro no campo "+nome+"<br />"; 
                    totalErros++;}
                    break
            case "email":
                if(!ValidaEmail(document.getElementById(id).value)){
                    document.getElementById("msgDiv").innerHTML+="O "+nome+" que você informou é inválido "+document.getElementById(id).value+"  <br />"; 
                    totalErros++;}
                    break
            default:
                document.getElementById("msgDiv").innerHTML+="<br />";
        }            
    }
    if(totalErros==0) {  
        document.getElementById("msgDiv").innerHTML="Agora foi "+ totalErros;
        return true;
    }
}

Upvotes: 2

Views: 14392

Answers (2)

Ja͢ck
Ja͢ck

Reputation: 173522

This part of your code piqued my curiosity:

var x=document.getElementById("frm1");
for (var i=0;i<x.length;i++){
    var input=document.getElementsByTagName("input")[i];

This takes the collection of all <input> elements on your page and takes the ith one each time; and who knows what input element you may get.

If you just want to traverse only the elements of the form you're interested in, this is much easier and faster:

var x = document.getElementById('frm1'),
input,
campo;

for (var i = 0, n = x.length; i != n; ++i) {
    input = x.elements[i];
    if (campo = input.id) {
        // rest of your code
    }
}

As you can see, I take the id property instead of the id attribute; this is generally a better thing to do, because changes in properties may not always be reflected in the respective attribute.

Also, the .toString() is superfluous, it's already a string if not null.

Update

As @bfavaretto pointed out in the comment section, this part of your code could also be simplified:

if(document.getElementById(id).value==""){

to this:

if (input.value == '') {

That would work whether the input element has an id or not

Upvotes: 1

Levi Botelho
Levi Botelho

Reputation: 25204

Your problem is this:

var input=document.getElementsByTagName("input")[i];
var campo=input.getAttribute("id");
//...
var id=campo.toString(); //the error goes here

You are getting a given input element and storing it in the variable input. You are then getting the ID of that element and storing it in the variable campo. You then take campo and call toString() on it.

The problem is that at least one input element does not have an ID. Because you cannot call toString on null, you get an error.

You don't actually need to call toString() in the first place. Simply use campo as is. It will either be null (if there is no ID) or a string.

Upvotes: 2

Related Questions