Geek Answers Handbook

The javascript function does not work when clicking a link

I have a pretty simple page with sidebar navigation and an iFrame for loading content.

I want to change the contents of an iFrame by clicking the links in the sidebar of nav. I am using javascript to change the source (.src) of document.element.

I read a lot of articles (StackOverflow), and the code should work, but just doesn't work.

Below is the html code I created and it includes JS in the tag.

<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>
+3
source share
4 answers

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

Other than this, there are a few other things that need to be fixed:

HTML (onclick, onmouseover ..), :

  1. " ", .
  2. .
  4. .
  5. - , this .
  6. W3C.
  7. IE.

.

JavaScript .addEventListener() .

, ( ). , , href #, "".

// 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>
Hide result
+13

( ):

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

:

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


<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>
Hide result
+1

. . , script .

+1

javascript: void (0).

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

false javascript

     <script type="text/javascript">
function getContent(){

    document.getElementById("contentFrame").src="LoremIpsum.html";
    return false;

}
</script>
0

More articles:


All Articles