javascript function doesn’t work when link is clicked

  1. Home
  2. javascript
  3. javascript function doesn’t work when link is clicked

I have a fairly simple page with a sidebar nav and an iFrame in which to load content.

I want to change the content of the of the iFrame by clicking on links in the sidebar nav. I’m using the javascript to change the source (.src) of the document.element.

I’ve read numerous articles (StackOverflow) and the code should work, but is simply doesn’t.

The code below is the html page I’ve created and it includes the JS in a 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>

First answer

Second answer

This is a syntax error. Parenthesis are required no matter the parameters of the function. However, it is a good practice to place script tags at the bottom of the body tag.

Third answer

You can use javascript:void(0).

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

Or return false on javascript

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

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

}
</script>
Reprint:https://stackoverflow.com/questions/43459890/javascript-function-doesnt-work-when-link-is-clicked
Spread the love

Related articles

Comments are closed.