Categories
html iframe javascript

javascript function doesn’t work when link is clicked

10

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="https://stackoverflow.com/questions/43459890/css/default.css" rel="stylesheet" type="text/css">

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

        document.getElementById("contentFrame").src="https://stackoverflow.com/questions/43459890/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="https://stackoverflow.com/questions/43459890/dummy.html">
</iframe>

</body>

2

  • 3

    Try adding parentheses to the js function declaration. Instead of ‘function getContent{‘ use ‘function getContent() {‘.

    – mrkd1991

    Apr 17, 2017 at 21:30

  • Look at the console, and you will see that you have a syntax error

    – Ibu

    Apr 17, 2017 at 21:31

2

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.

    1

    You have a syntax error in your function declaration (missing parenthesis):

    function getContent {
       document.getElementById("contentFrame").src="https://stackoverflow.com/questions/43459890/LoremIpsum.html";
    }
    

    Should be:

    function getContent() {
       document.getElementById("contentFrame").src="https://stackoverflow.com/questions/43459890/LoremIpsum.html";
    }
    

    You also need to prevent the default event for the link

    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <link href="https://stackoverflow.com/questions/43459890/css/default.css" rel="stylesheet" type="text/css">
    
    <script type="text/javascript">
        function getContent(event) {
           event.preventDefault();
           document.getElementById("contentFrame").src="https://stackoverflow.com/questions/43459890/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="https://stackoverflow.com/questions/43459890/dummy.html">
    </iframe>
    
    </body>

    7

    • To prevent the link navigation, you can just set the href to #. No JavaScript needed.

      Apr 17, 2017 at 21:38

    • Fair enough, I tend to steer clear of inlining javascript like this and prefer to use event.preventDefault()

      – Rob M.

      Apr 17, 2017 at 21:40

    • Setting the value to # is not inlining JavaScript. There’s no JavaScript at all with that.

      Apr 17, 2017 at 21:41

    • I’m aware of that, I was referring to onclick='getContent(event)'

      – Rob M.

      Apr 17, 2017 at 21:41

    • Yes, agreed (and I discuss that in detail in my answer). But, your reply to my comment was not about what my comment was about in the first place.

      Apr 17, 2017 at 21:42