error " Property 'innerText' does not exist on type 'EventTarget' "?

Question

I have an error:

Property 'innerText' does not exist on type 'EventTarget'.

I'm trying to add event listener and get value from element. Everything works fine but this error shows up in console .

public componentDidMount() {
  const element = document.querySelector(".mdc-list")
  element.addEventListener("click", (e) => {
    this.data.menu.title = e.target.innerText
  })
}

Well it doesn't. `Window` is possible `EventTarget` and it doesn't have `innerText`. Also `Document`. You need to check which `EventTarget` was it. — Roberto Zvjerković, Feb 26 '19 at 13:31
works fine for me, but depends on what type of element was clicked: https://jsfiddle.net/bt0mozp3/2/ — Pete, Feb 26 '19 at 13:42

score 33 · Accepted Answer · answered Feb 26 '19 at 13:55

33

It is a TypeScript issue, cast the event.target to it’ type to tell TypeScript that it has the property you set for it.

const input = event.target as HTMLElement;
this.data.menu.title=input.innerText

answered Feb 26 '19 at 13:55

Osama

2,912
1
12
15

for someone see this error in html template like me: $any($event.target).innerText – Huy - Logarit Feb 07 '22 at 16:12

score 1 · Answer 2 · answered Feb 26 '19 at 13:46

1

You can either make a type guard to narrow down the event target type.

Or just cast the event target to whichever element you're getting as a target:

this.data.menu.title = <HTMLInputElement>(e.target).innerText;

answered Feb 26 '19 at 13:46

Roberto Zvjerković

9,657
4
26
47

error " Property 'innerText' does not exist on type 'EventTarget' "?

2 Answers2

Linked