'play' does not exist on type 'HTMLElement' and Property 'value' does not exist on type 'EventTarget'

Question

Not sure why these two warning came from. Any idea to get rid of those warning message from typescript? Thanks

error TS2339: Property 'play' does not exist on type 'HTMLElement'.

    export function playAudio(e, audioId) {
        e.preventDefault()
        let audioPlayer: HTMLElement = document.getElementById(audioId)
        audioPlayer.play();
    }

(248,82): error TS2339: Property 'value' does not exist on type 'EventTarget'.

    <input type="checkbox" id="inputSchedule" name="inputCheckboxesSchedule"
           value={this.state.displayMode}
           onClick={e => this.toogleDisplaymode(e.target.value)}/>

Answer 1

In Angular 5 you need to cast it as follows:

let audioPlayer = <HTMLVideoElement> document.getElementById(audioId);

audioPlayer.play();  

Answer 2

The first warning means that there is no play() method on an HTMLElement instance. This makes sense since play() is presumably a method that you have defined on your own component.

The second warning means that there is no value property in the EventTarget instance. For more information about EventTargets, see MDN.

I am not sure how to solve the first problem since you need to grab access to an instance that you have created. But for the second one, you most likely just need to cast the return value. So, you should do something like this:

{e => this.toogleDisplaymode((e.target as HTMLInputElement).value)}

---

EDIT: This might solve your first problem.

I am not sure, but it might be that you are trying to play a media element and if that's the case, you need to cast the audioPlayer to the right type:

let audioPlayer: HTMLMediaElement = document.getElementById(audioId)

See MDN, again, for more information.

Answer 3

In angular 7 works this code:

let audioPlayer = <HTMLVideoElement>document.getElementById('video');
audioPlayer.muted = true;

Answer 4

A late post but it will help other users, To solve the first problem you can change type of audioPlayer variable to HtmlVideoElement as below

let audioPlayer: HTMLVideoElement = document.getElementById(audioId);  
audioPlayer.play();  

This will definately resolve the problem