# TypeError: Cannot read properties of undefined (reading '\_elements')

**URL:** <https://discourse.processing.org/t/typeerror-cannot-read-properties-of-undefined-reading-elements/34969>\
**Category:** Libraries\
**Created:** [February 4, 2022, 1:54am UTC](https://discourse.processing.org/t/typeerror-cannot-read-properties-of-undefined-reading-elements/34969 "2022-02-04T01:54:10Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Errorbot1122](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/errorbot1122/32/14718_2.png) [@Errorbot1122](https://discourse.processing.org/u/Errorbot1122)\
**Post date:** [February 4, 2022, 1:54am UTC](https://discourse.processing.org/t/typeerror-cannot-read-properties-of-undefined-reading-elements/34969/1 "2022-02-04T01:54:10Z")

</div>

I tried to remove a `div` inside the set timeout function but it give me the error in the title.

Here is the stack trace:

```auto
TypeError: Cannot read properties of undefined (reading '_elements')
    at f.default.Element.remove (https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js:3:520693)

```

_I’m currently in instance mode if you need to know_

I could not make a **MWE** but my live code is right [here](https://replit.com/@ErrorbotTHE2nd/Roblox-External-Editor#loading.js)

The code that is seemingly causing the issue is on line **438** with the code being this:

```auto
// Remove eveything if it is done loading
if ( FilesFullyLoaded || p.LoadPercent >= 100 ) {
	
	FilesFullyLoaded = true; // Sets FilesFullyLoaded to true

	p.LoadingText.html("Loading... DONE!!"); // Tells the user that the loading is done

	p.noLoop(); // Stops the draw loop from looping
			
	setTimeout(p.LoadingDiv.remove, 750);	// <-- This line // Deletes div to make it disapere
			
} 
else {
	p.LoadingText.html(`Loading... ${p.round(p.LoadPercent)}%`) // Inform the user of the percentage of files loaded
}

```

I know this because every time I remove the line its fixed.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 4, 2022, 3:31am UTC](https://discourse.processing.org/t/typeerror-cannot-read-properties-of-undefined-reading-elements/34969/2 "2022-02-04T03:31:10Z")

</div>

I don’t think we can use method [**remove()**](https://p5js.org/reference/#/p5.Element/remove) over a [p5.Element](https://p5js.org/reference/#/p5.Element) which has been created via [**select()**](https://p5js.org/reference/#/p5/select) b/c it refers to an already existing [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement).

Instead it’s used for **createXXX()** named functions such as [**createElement()**](https://p5js.org/reference/#/p5/createElement).

---

<div class="post-metadata">

**Author:** ![Errorbot1122](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/errorbot1122/32/14718_2.png) [@Errorbot1122](https://discourse.processing.org/u/Errorbot1122)\
**Post date:** [February 4, 2022, 5:35pm UTC](https://discourse.processing.org/t/typeerror-cannot-read-properties-of-undefined-reading-elements/34969/3 "2022-02-04T17:35:05Z")

</div>

So i cant do it or what?

> [@GoToLoop](#):
>
> I don’t think we can use method [**remove()**](https://p5js.org/reference/#/p5.Element/remove) over a [p5.Element](https://p5js.org/reference/#/p5.Element) which has been created via [**select()**](https://p5js.org/reference/#/p5/select) b/c it refers to an already existing [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement).

That may be true **BUT** when I use the `.remove()` method without the `setTimeout()` it works.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 4, 2022, 6:12pm UTC](https://discourse.processing.org/t/typeerror-cannot-read-properties-of-undefined-reading-elements/34969/4 "2022-02-04T18:12:27Z")

</div>

Oh, I thought it’d be that. But on a 2nd look I’ve spotted the obvious here:

> [@Errorbot1122](#):
>
> `setTimeout(p.LoadingDiv.remove, 750);`

For any function which depends on the keyword `this` (as methods normally do) we have to be watchful whether the object invoking it is the correct 1, b/c that becomes the `this` inside a function.

In the case of `p.LoadingDiv.remove`, **remove()**'s preceding property _LoadingDiv_ contains the correct object which becomes the caller object when we manually invoke it like this:  
`p.LoadingDiv.remove();`

However, when we pass the expression `p.LoadingDiv.remove` to **setTimeout()** as its callback, it’s not _LoadingDiv_ which is gonna invoke **remove()** anymore:

> **[setTimeout() global function - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#the_this_problem)**
>
> The global setTimeout() method sets a timer which executes a function or specified
> piece of code once the timer expires.

As an archaic workaround we could use method **bind()** in order to clone the method w/ a fixed `this`:  
`setTimeout(p.LoadingDiv.remove.bind(LoadingDiv), 750);`

> **[Function.prototype.bind() - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind#with_settimeout)**
>
> The bind() method of Function instances creates a new function that, when called, calls this function with its this keyword set to the provided value, and a given sequence of arguments preceding any provided when the new function is called.

But for modern JS, a wrapper function using the fat arrow expression syntax is the usual pick instead:  
`setTimeout(() => p.LoadingDiv.remove(), 750);`

> **[Arrow function expressions - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)**
>
> An arrow function expression is a compact alternative to a traditional function expression, with some semantic differences and deliberate limitations in usage:

P.S.: By JS (and Java) convention, regular variables, parameters & properties should use the _lowerCamelCase_ style.  
So property _LoadingDiv_ is better off renamed as _loadingDiv_.

---

<div class="post-metadata">

**Author:** ![Errorbot1122](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/errorbot1122/32/14718_2.png) [@Errorbot1122](https://discourse.processing.org/u/Errorbot1122)\
**Post date:** [February 14, 2022, 7:38pm UTC](https://discourse.processing.org/t/typeerror-cannot-read-properties-of-undefined-reading-elements/34969/5 "2022-02-14T19:38:21Z")

</div>

**THANK YOU SO MUCH** 😃

> [@GoToLoop](#):
>
> P.S.: By JS (and Java) convention, regular variables, parameters & properties should use the _lowerCamelCase_ style.

I have a specific way to formate my vars so _LoadingDiv_ really means it’s a “globe” var (for the **p** namespace) and it can change, like a **let.**