Comment éviter l'exécution prématurée des fonctions Onclick en JavaScript

Exécution de la fonction Onclick avant de cliquer : un piège courant en Javascript

En Javascript, la fonction onclick peut être utilisée pour attribuer une action à un élément HTML lorsque vous cliquez dessus. Cependant, les développeurs sont souvent confrontés à un problème où la fonction est exécutée immédiatement après la création de l'élément, avant même de cliquer dessus.

Dans le code Javascript fourni, le développeur vise à créer un lien qui déclenche une fonction lorsqu'on clique dessus au lieu de redirection vers une nouvelle page. Cependant, la fonction onclick (secondFunction) est appelée immédiatement en raison d'une méthode d'affectation incorrecte.

L'erreur réside dans la ligne :

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

Ici, la secondFunction() est directement invoquée , ce qui signifie que la fonction s'exécute dès qu'elle est définie. Pour résoudre ce problème, il doit être attribué comme suit :

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

En référençant la fonction sans parenthèses, le code attribue la fonction elle-même, et non sa valeur de retour. Cela garantit que la fonction est exécutée uniquement lorsque l'événement onclick se produit.

Le code correct devrait ressembler à :

<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);