Property 'selectedIndex' does not exist on type HTMLElement

avatar

Borislav Hadzhiev

Last updated: Mar 19, 2022

banner

Photo from Unsplash

Property 'selectedIndex' does not exist on type HTMLElement #

The error "Property 'selectedIndex' does not exist on type 'HTMLElement'" occurs when we try to access the selectedIndex property on an element that has a type of HTMLElement. To solve the error, use a type assertion to type the element as HTMLSelectElement.

property selectedindex not exist type htmlelement

This is the index.html file for the examples in this article.

index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <select id="select" style="font-size: 3rem"> <option value="">--Choose an option--</option> <option value="horse">Horse 🐴</option> <option selected value="wolf">Wolf 🐺</option> <option value="fox">Fox 🦊</option> </select> <script src="./src/index.ts"></script> </body> </html>

And here is an example of how the error occurs in the index.ts file.

src/index.ts
const select = document.getElementById('select'); if (select != null) { // ⛔️ Property 'selectedIndex' does not exist on type 'HTMLElement'.ts(2339) const idx = select.selectedIndex; console.log(idx); }

The reason we got the error is that the return type of the document.getElementById method is HTMLElement | null and the selectedIndex property doesn't exist on the HTMLElement type.

To solve the error, use a type assertion to type the element as an HTMLSelectElement.

src/index.ts
const select = document.getElementById('select') as HTMLSelectElement | null; if (select != null) { const idx = select.selectedIndex; console.log(idx); // 👉️ 2 }

Type assertions are used when we have information about the type of a value that TypeScript can't know about.

We effectively tell TypeScript that the select variable stores anHTMLSelectElement or a null value and not to worry about it.

We used a union type to specify that the variable could still be null, because if an HTML element with the provided id does not exist in the DOM, the getElementById() method returns a null value.

We used a simple if statement that serves as a type guard to make sure the select variable doesn't store a null value before accessing its selectedIndex property.

src/index.ts
const select = document.getElementById('select') as HTMLSelectElement | null; // 👉️ select has type HTMLSelectElement or null here if (select != null) { // 👉️ select has type HTMLSelectElement here const idx = select.selectedIndex; console.log(idx); }
TypeScript knows that the select variable has a type of HTMLSelectElement in the if block and allows us to directly access its selectedIndex property.

It's always a best practice to include null in the type assertion because the getElementById method would return null if no element with the provided id was found.

You might also use the optional chaining (?.) operator to short-circuit if the reference is equal to null or undefined

src/index.ts
const select = document.getElementById('select') as HTMLSelectElement | null; const idx = select?.selectedIndex; console.log(idx); // 👉️ 2

The optional chaining operator short-circuits returning undefined if the reference is equal to null or undefined.

In other words, if the select variable stores a null value, we won't attempt to access the selectedIndex property on null and get a runtime error.

Conclusion #

The error "Property 'selectedIndex' does not exist on type 'HTMLElement'" occurs when we try to access the selectedIndex property on an element that has a type of HTMLElement. To solve the error, use a type assertion to type the element as HTMLSelectElement.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.