Pourquoi ma fonction JavaScript ne s'exécute-t-elle pas lors d'un clic sur un lien ?

La fonction JavaScript ne parvient pas à s'exécuter lors d'un clic sur un lien

Description du problème

Une page Web se compose d'une barre de navigation latérale et d'une iframe pour afficher le contenu. La navigation contient des liens destinés à modifier le contenu de l'iframe. Cependant, la fonction JavaScript conçue pour modifier la source de l'iframe ne fonctionne pas.

Solution

Le problème principal provenait de l'omission des parenthèses nécessaires à l'exécution de la fonction getContent dans le gestionnaire d'événements onclick.

Considérations supplémentaires

Éviter les événements en ligne Gestionnaires

L'utilisation de gestionnaires d'événements en ligne (par exemple, onclick, onmouseover) est fortement déconseillée car elle entraîne du code spaghetti, une duplication de code, des problèmes d'évolutivité et des écarts par rapport aux meilleures pratiques.

Séparez HTML et JavaScript

Gardez votre code HTML et JavaScript séparés pour une amélioration lisibilité et maintenance plus facile.

Désactiver la navigation par lien pour les boutons

Si vous utilisez un lien pour un élément de type bouton, définissez son attribut href sur # au lieu de "" pour l'empêcher de naviguer.

Code révisé

Vous trouverez ci-dessous le code révisé avec les corrections appliqué :

<br>function getContent() {<br> console.log("L'ancienne source était : " iFrame.src);<br> iFrame.src="LoremIpsum.html" ;<br> console.log("La nouvelle source est : " iFrame.src);<br>}</p>
<p>// Obtenir une référence au bouton et à l'iframe<br>var btn = document.getElementById("btnChangeSrc");<br>var iFrame = document.getElementById ("contentFrame");</p>
<p>// Configurer un gestionnaire d'événements de clic pour le bouton<br>btn.addEventListener("click", getContent);<br>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!