So vermeiden Sie eine vorzeitige Ausführung von Onclick-Funktionen in JavaScript

Onclick-Funktionsausführung vor dem Klicken: Eine häufige Gefahr in Javascript

In Javascript kann die Onclick-Funktion verwendet werden, um einem HTML-Element beim Klicken eine Aktion zuzuweisen. Entwickler stehen jedoch häufig vor dem Problem, dass die Funktion sofort bei der Elementerstellung ausgeführt wird, noch bevor darauf geklickt wird.

Im bereitgestellten Javascript-Code möchte der Entwickler einen Link erstellen, der beim Klicken eine Funktion auslöst Weiterleitung auf eine neue Seite. Allerdings wird die Onclick-Funktion (secondFunction) aufgrund einer falschen Zuweisungsmethode sofort aufgerufen.

Der Fehler liegt in der Zeile:

<code class="js">sentNode.setAttribute('onclick', secondFunction());</code>

Hier wird die secondFunction() direkt aufgerufen , was bedeutet, dass die Funktion ausgeführt wird, sobald sie definiert ist. Um dieses Problem zu beheben, sollte es wie folgt zugewiesen werden:

<code class="js">sentNode.setAttribute('onclick', secondFunction);</code>

Durch die Referenzierung der Funktion ohne Klammern weist der Code die Funktion selbst zu, nicht ihren Rückgabewert. Dadurch wird sichergestellt, dass die Funktion nur ausgeführt wird, wenn das Onclick-Ereignis auftritt.

Der korrekte Code sollte wie folgt aussehen:

<br>function startFunction() {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var sentNode = document.createElement('a');
sentNode.setAttribute('href', "#");
sentNode.setAttribute('onclick', secondFunction); // Assign function reference
sentNode.innerHTML = "Sent Items";

// Add new element to parent
var parentNode = document.getElementById('parent');
var childNode = document.getElementById('sendNode');
parentNode.insertBefore(sentNode, childNode);