Heim > Web-Frontend > js-Tutorial > Wie rufe ich eine JavaScript-Funktion ordnungsgemäß über eine HTML-Schaltfläche auf?

Wie rufe ich eine JavaScript-Funktion ordnungsgemäß über eine HTML-Schaltfläche auf?

Barbara Streisand
Freigeben: 2024-11-26 00:03:13
Original
284 Leute haben es durchsucht

How to Properly Call a JavaScript Function from an HTML Button?

Aufrufen einer JavaScript-Funktion mit einer HTML-Schaltfläche

Sie versuchen, eine JavaScript-Funktion, CapacityChart(), mithilfe einer HTML-Schaltfläche aufzurufen. aber die Funktion wird nicht ordnungsgemäß ausgeführt.

Der erste Ansatz besteht darin, den Onclick-Ereignishandler direkt im HTML zu definieren element:

<input type="button" value="Capacity Chart" onclick="CapacityChart();">
Nach dem Login kopieren

Das Definieren von Ereignishandlern in HTML weist jedoch Einschränkungen auf. Moderne Browser bevorzugen die Verwendung von JavaScript-Ereignis-Listenern für eine bessere Code-Organisation und -Wartung.

Mit JavaScript können Sie dem Onclick-Ereignis der Schaltfläche mithilfe der Methode addEventListener() einen Ereignis-Listener zuweisen:

document.getElementById("buttonId").addEventListener("click", CapacityChart);
Nach dem Login kopieren

Eine andere Möglichkeit besteht darin, eine anonyme Funktion direkt an die onclick-Eigenschaft anzuhängen:

document.getElementById("buttonId").onclick = function() { CapacityChart(); };
Nach dem Login kopieren

Das Problem mit Ihrer CapacityChart()-Funktion liegt wahrscheinlich woanders. Versuchen Sie, das Problem mit dem folgenden Code zu beheben:

CapacityWindow.document.open("text/html");
CapacityWindow.document.write(s);
CapacityWindow.document.close();
Nach dem Login kopieren

Um die browserübergreifende Kompatibilität sicherzustellen, ersetzen Sie außerdem alle Instanzen von document.all durch document.getElementById in Ihrem Code.

Das obige ist der detaillierte Inhalt vonWie rufe ich eine JavaScript-Funktion ordnungsgemäß über eine HTML-Schaltfläche auf?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage