La fonction javascript ne fonctionne pas lorsque le lien est cliqué

J'ai une page assez simple avec une barre latérale et un iFrame pour charger du contenu.

Je souhaite modifier le contenu de l'iFrame en cliquant sur les liens dans la barre latérale. J'utilise javascript pour modifier la source (.src) du document.element.

J'ai lu de nombreux articles (StackOverflow) et le code devrait fonctionner, mais ce n'est tout simplement pas.

Le code ci-dessous est la page html que j'ai créée et comprend le JS dans une balise.

<head> <meta charset="UTF-8"> <title>Untitled Document</title> <link href="css/default.css" rel="stylesheet" type="text/css"> <script type="text/javascript"> function getContent{ document.getElementById("contentFrame").src="LoremIpsum.html"; } </script> </head> <body> <div class="sidebar"><h1>Technical Documentation</h1> <ul> <li>Configuration Guides</li> <li>API Guides</li> <li><a href="" onclick='getContent()'> LoremIpsum</a></li> </ul> <!-- <button onclick="getContent()">Lorem Ipsum</button> --> </div> <iframe class="content" id="contentFrame" src="dummy.html"> </iframe> </body>

Votre problème était que vous avez oublié d'ajouter () après votre nom de fonction.

Au-delà, il y a quelques autres choses à corriger:

N'utilisez pas les attributs d'événement HTML en ligne ( onclick , onmouseover , etc.) tels qu'ils:

Créez un "code spaghetti" difficile à lire et à déboguer.
Mener à la duplication du code.
Ne balancez pas bien
Ne pas suivre la méthodologie de développement de séparation des préoccupations .
Créez des fonctions globales anonymes d'enveloppe autour de vos valeurs d'attribut qui modifient this liaison dans vos fonctions de rappel.
Ne suivez pas le W3C Event Standard .

Au lieu de cela, faites tout votre travail en JavaScript et utilisez .addEventListener() pour configurer les gestionnaires d'événements.

N'utilisez pas d'hyperlien lorsqu'un bouton (ou un autre élément) fera. Si vous utilisez un lien hypertexte, vous devez désactiver son désir natif de naviguer, ce qui se fait en définissant l'attribut href sur # , et non sur "" .

 // Place this code into a <script> element that goes just before the closing body tag (</body>). // Get a reference to the button and the iframe var btn = document.getElementById("btnChangeSrc"); var iFrame = document.getElementById("contentFrame"); // Set up a click event handler for the button btn.addEventListener("click", getContent); function getContent() { console.log("Old source was: " + iFrame.src); iFrame.src="LoremIpsum.html"; console.log("New source is: " + iFrame.src); }

 <div class="sidebar"><h1>Technical Documentation</h1> <ul> <li>Configuration Guides</li> <li>API Guides</li> </ul> <button id="btnChangeSrc">Change Source</button> </div> <iframe class="content" id="contentFrame" src="dummy.html"></iframe>

Vous avez une erreur de syntaxe dans votre déclaration de fonction (parenthèses manquantes):

 function getContent { document.getElementById("contentFrame").src="LoremIpsum.html"; }

Devrait être:

 function getContent() { document.getElementById("contentFrame").src="LoremIpsum.html"; }

Vous devez également empêcher l'événement par défaut du lien

 <head> <meta charset="UTF-8"> <title>Untitled Document</title> <link href="css/default.css" rel="stylesheet" type="text/css"> <script type="text/javascript"> function getContent(event) { event.preventDefault(); document.getElementById("contentFrame").src="LoremIpsum.html"; } </script> </head> <body> <div class="sidebar"><h1>Technical Documentation</h1> <ul> <li>Configuration Guides</li> <li>API Guides</li> <li><a href="#" onclick='getContent(event)'> LoremIpsum</a></li> </ul> <!-- <button onclick="getContent()">Lorem Ipsum</button> --> </div> <iframe class="content" id="contentFrame" src="dummy.html"> </iframe> </body>

Il s'agit d'une erreur de syntaxe. Les parenthèses sont requises, peu importe les paramètres de la fonction. Cependant, il est recommandé de placer des étiquettes de script au bas de la balise du corps .

Vous pouvez utiliser javascript: void (0).

  <a href="javascript:void(0)" onclick='getContent(event)'> LoremIpsum</a>

Ou renvoie false sur javascript

  <script type="text/javascript"> function getContent(){ document.getElementById("contentFrame").src="LoremIpsum.html"; return false; } </script>