Home / Questions / 169194
Accepted
Pablo Lozano
Asked: 2020-05-31 07:39:53 +0800 CST 2020-05-31 07:39:53 +0800 CST

What does "Uncaught TypeError: Cannot set/read properties of undefined/null" mean and how to fix it?

  • 772

The following code fails:

let obj1,obj2;
obj2 = {
  atributo: 'texto'
};

console.log(obj1.atributo);

Showing in console the message:

Uncaught TypeError: Cannot read properties of undefined (reading 'attribute')

In Firefox (v96) the message is:

Uncaught TypeError: obj1 is undefined

What does it mean and how can I fix it?

javascript

2 Answers

  1. Best Answer

    Based on the error

    Uncaught TypeError: Cannot read property 'attribute' of undefined

    This error is very common you are trying to access an element that does not exist or its value is undefined

    console.info("Ejemplo de acceso a un elemento del DOM que existe")
const div_existe = document.getElementById("existe")
console.log("div=", div_existe)
console.log("atributo div=" , div_existe.innerHTML) 
//caso que no existe 
console.info("Intentando Acceder a un elemento que NO Existe")
const div_no_existe = document.getElementById("no_existe")
console.log("div=", div_no_existe)
console.log("atributo div=", div_no_existe.innerHTML) //linea de error
    <div id="existe">chispas!!!</div>

    The error means you can't access that property , but why?

    In the example you posted obj1it is declared but not used, let's see the data type that the test throws us

    let obj1,obj2;
obj2 = {
  atributo: 'texto'
};
console.log("obj1->" , typeof(obj1));
console.log("obj2->" , typeof(obj2));

    How to solve it?

    For this error the value of the variables must be null or undefined , what you can do is the following:

    • Check if the object is declared
    • The assignment to your Object does not receive null or undefined parameters
    • If you use an external library, verify that it is well imported

    let libreriaExterna 
libreriaExterna.top = 3;

    • Validate if the attribute exists (in the worst case that your object is very variable)

    let obj1 ,obj2
obj2 = {
  atributo: 'texto'
};

console.log("obj1: ¿está definido?" , typeof obj1 !== 'undefined');
console.log("obj2: ¿está definido?" , typeof obj2 !== 'undefined');
console.log("obj2.atributo: ¿está definido?" , typeof obj2.atributo !== 'undefined');

    • Control them with a Try/Cath(Javascript has that? yes)

    let obj1,obj2;
obj2 = {
  atributo: 'texto'
};
try{
console.log(obj1.atributo);
}catch(e){
console.error(e.message," porque no existe el objeto");

}

    • 19

  2. Following the series of questions and answers on the same topic

    Let's clarify its equivalent in Javascript:

    What does it mean?

    The meaning of the error message "Uncaught TypeError: Cannot read property 'XXX' of undefined" is:

    Uncaught TypeError: Cannot read property 'XXX' from undefined.

    And it means that we are trying to access a property (attribute or function) of an identifier that is not defined.

    In the example in the question the error occurs because we have two variables, obj1 and obj2, where obj1 has not been assigned a value, it is undefined . If obj1 were equal null, the error would be similar.

    How to solve it?

    The way to fix this is to look in our code for the attribute XXXwe're trying to access (or set) and then see why the parent object is nullor undefined.

    Typical reasons are usually:

    • Attempting to access a variable modified by asynchronous code (the response to an AJAX call or an event such as a mouse click or keystroke) before it has assigned a value to that variable.

    • Assuming that a function always returns a value other than nullor undefined: for example, if this query returns a list with 2 elements, but we are trying to access a non-existent third element:

      let myDivs = document.getElementsByClass('myDiv');
let text=myDivs[2].innerText;
// Uncaught TypeError: Cannot read property 'innerText' of undefined
    • 12