javascript function doesn’t work when link is clicked

Your problem was that you forgot to add () after your function name.

Beyond that, there are a few other things to correct:

Don’t use inline HTML event attributes (onclick, onmouseover, etc.) as they:

  1. Create “spaghetti code” that is difficult to read and debug.
  2. Lead to duplication of code.
  3. Don’t scale well
  4. Don’t follow the separation of concerns development methodology.
  5. Create anonymous global wrapper functions around your attribute values that alter the this binding in your callback functions.
  6. Don’t follow the W3C Event Standard.
  7. Don’t cause a reference to the DOM event to be passed to the handler.

Even MDN agrees

Instead, do all your work in JavaScript and use .addEventListener() to set up event handlers.

Don’t use a hyperlink when a button (or some other element) will do. If you do use a hyperlink, you need to disable its native desire to navigate, which is done by setting the href attribute to #, not "".

// 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);
  console.log("New source is: " +  iFrame.src);
<div class="sidebar"><h1>Technical Documentation</h1>
    <li>Configuration Guides</li>
    <li>API Guides</li>
<button id="btnChangeSrc">Change Source</button>


<iframe class="content" id="contentFrame" src=""></iframe>

Leave a Comment