1// If you have to use event.target itself, you would have to cast the object:
2
3const { name } = event.target as HTMLButtonElement;
1document.getElementById() returns the type HTMLElement which does not contain a value property.
2The subtype HTMLInputElement does however contain the value property.
3
4So a solution is to cast the result of getElementById() to HTMLInputElement like this:
5
6var inputValue = (<HTMLInputElement>document.getElementById(elementId)).value;
7<> is the casting operator in typescript.
8See TypeScript: casting HTMLElement: https://fireflysemantics.medium.com/casting-htmlelement-to-htmltextareaelement-in-typescript-f047cde4b4c3
9
10The resulting javascript from the line above looks like this:
11
12inputValue = (document.getElementById(elementId)).value;
13i.e. containing no type information.
1To prevent this error you can write:
2
3var plotDiv: any = document.getElementById('myDiv');
4plotDiv.on('plotly_relayout', ...
5document.getElementById('myDiv') return HTMLElement. This type doesn't contain method
6on because this method is added within plotly-latest.min.js. So in order to silence
7the typescript warning you can explicity say compile not to check types for plotDiv
8
9Another way is create type definition like:
10
11interface PlotHTMLElement extends HTMLElement {
12 on(eventName: string, handler: Function): void;
13}
14
15var plotDiv = <PlotHTMLElement>document.getElementById('myDiv')
16plotDiv.on('plotly_relayout', function() {
17
18});
1@Zyon Lyod has already provided the code and some explanation but i will add
2more details:
3The problem is that not all html events have the value property. And thus not all
4event.target have that property since event.target is a generic html element
5so you need to cast to the html element that you are using
6You are welcome,