How to use document.getElementById in inline click event binding?

Asked Oct 30 '21 at 05:05

Active Oct 30 '21 at 07:21

Viewed 1,214 times

-2

The following code cannot be parsed by VS Code.

Parser Error: Missing expected ) at column 34 in [(document.getElementById('btnA') as HTMLInputElement).disabled=true] in

<button id="btnA">A</button>
<button (click)="(document.getElementById('btnA') as HTMLInputElement).disabled=true">Disable A</button>

or

<button id="btnA">A</button>
<button (click)="<HTMLInputElement>document.getElementById('btnA').disabled=true">Disable A</button>

How to use document.getElementById() in inline click event binding?

Edit 1:

I want to use event binding rather than onclick.

Edit 2:

Actually I want to mimic the working code below but with getElementById().

<button #btnA>A</button>
<button (click)="btnA.disabled=true">Disable A</button>

edited Oct 30 '21 at 07:05

asked Oct 30 '21 at 05:05

Second Person Shooter

14,188
21
90
165

in the fisrt, you should remove the "(". NOTE: Yes, the "Angular way" is to use a variable – Eliseo Oct 30 '21 at 08:44
`Yes. I did but I want to know how to make it with getElementById` -> Why? Angular exposes a lot of *good* ways to manipulate DOM, and doing it using javascript is a bad practice, since you are exiting the scope of Angular itself. – Jacopo Sciampi Oct 30 '21 at 09:29

2 Answers2

1

<button id="btnA">A</button>
<button onClick="() =>{<HTMLInputElement>document.getElementById('btnA').disabled=false"}>Disable A</button>

answered Oct 30 '21 at 05:10

Pedro Maia

2,666
1
5
20

Sorry. I want to use event binding. – Second Person Shooter Oct 30 '21 at 05:11
AFAIK this is event binding: [What does event binding even mean?](https://stackoverflow.com/q/6329996/463206); perhaps the OP means to use the [DOM elements' addEventListener`](https://www.w3schools.com/js/js_htmldom_eventlistener.asp) – radarbob Oct 30 '21 at 05:27
Event binding (and other bindings) in Angular: https://angular.io/guide/binding-syntax – Second Person Shooter Oct 30 '21 at 05:32

1

You can use a template reference, which will be a reference to the HTML element

<button #btnA>A</button>
<button (click)="btnA.disabled=true">Disable A</button>

answered Oct 30 '21 at 07:21

Drenai

11,315
9
48
82

Maybe it's because the component doesn't have a `console` property. Try adding `public console = console` to the component – Drenai Oct 30 '21 at 09:03