Klick in Typoskript auslösen – Eigenschaft „Klick“ existiert nicht für Typ „Element“

Lesezeit: 2 Minuten

Benutzeravatar von Floris
Floris

Ich möchte ein Click-Event auf ein HTML-Element in Typescript/Reactjs auslösen.

let element: Element = document.getElementsByClassName('btn')[0];
element.click();

Der obige Code funktioniert. Aber ich erhalte einen Typescript-Fehler:

ERROR in [at-loader] ./src/App.tsx:124:17
TS2339: Property 'click' does not exist on type 'Element'.

Was wäre also der richtige Weg, dies zu tun?

Benutzeravatar von Suren Srapyan
Suren Srapjan

Verwenden Sie den Typ HTMLElement Anstatt von Element. HTMLElement erbt von Element. Und in der Dokumentation finden Sie das click Die Funktion ist im HTMLElement definiert.

Gießen Sie Ihr Element in das HTMLElement via

let element: HTMLElement = document.getElementsByClassName('btn')[0] as HTMLElement;
element.click();

  • oder auch HTMLButtonElement wenn du weißt, dass es ein ist <button/>

    – JKillian

    13. September 2017 um 17:59 Uhr

  • Nein: FEHLER ein [at-loader] ./src/Game.tsx:123:13 TS2322: Der Typ „Element“ kann dem Typ „HTMLElement“ nicht zugewiesen werden. Die Eigenschaft „accessKey“ fehlt im Typ „Element“.

    – Flori

    13. September 2017 um 18:00 Uhr

  • Cast-Operator verwenden document.getElementsByClassName('btn')[0] as HTMLElement

    – Suren Srapjan

    13. September 2017 um 18:02 Uhr


  • Danke das war es! Wusste nicht, dass ich solche Typen casten kann. Gibt mir das Java-Feeling :o)

    – Flori

    13. September 2017 um 18:07 Uhr


  • Typoskript ist manchmal so ein Müll

    – Daniel Ram

    13. Juli 2020 um 20:01 Uhr

Der richtige (typsichere) Weg ist:

if (element instanceof HTMLElement) {
  element.click();
}

Sie sollten keine erzwungenen Besetzungen verwenden (wie in anderen Antworten vorgeschlagen), es sei denn, Sie Ja wirklich brauche sie.

document
  .querySelectorAll<HTMLElement>('.ant-table-row-expand-icon')
  .forEach(node => node.click())

  • Erklären Sie es bitte!

    – Szabolcs Páll

    2. August 2019 um 6:00 Uhr

  • Nur so hat es funktioniert!

    – Ahmad Habib

    19. Mai um 9:47 Uhr

Benutzeravatar von Mukesh
Mukesch

Verwenden Sie so

(<HTMLElement>document.getElementsByClassName('btn')[0]).click()

Du solltest benutzen ref um auf DOM zuzugreifen.

<button  ref={button => this.buttonElement = button} />
In your event handler:

this.buttonElement.click();// trigger click event

Oder Erstellen Sie HtmlEvents und hängen Sie sie an das Dom-Element an.

var event = document.createEvent("HTMLEvents");
event.initEvent("click", true, true);
var button = document.getElementsByClassName('btn')[0];
button.dispatchEvent(event);

  • initEvent ist nicht mehr Standard.

    – Nikola Lukic

    25. Dezember 2017 um 13:51 Uhr

Benutzeravatar von Alfred Nobel
Alfred Nobel

ein ähnliches Problem beim Skripting mit Puppeteer hatte, half Folgendes, den Typ zu beheben: srcTracker:HTMLElement

page.$eval(this.selectorElement,(srcTracker:HTMLElement) => srcTracker.click());

  • initEvent ist nicht mehr Standard.

    – Nikola Lukic

    25. Dezember 2017 um 13:51 Uhr

Benutzeravatar von Reza Babaei
Reza Babaei

wie erwähnt hierAuch

var buttons = document.getElementsByClassName(
  "btn"
) as HTMLCollectionOf<HTMLElement>;

1430830cookie-checkKlick in Typoskript auslösen – Eigenschaft „Klick“ existiert nicht für Typ „Element“

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy