CODEWITHSUNDEEP
javascripthtml
jniegsch
jniegsch

Reputation: 420

iFrame is undefined in Javascript when called upon

Currently Im working on my personal portfolio and have encountered a problem I can't find the answer to. Firstly my webpage works on a main-frame basis, which means the user navigates not by changing page but by changing the page displayed in an iframe. Secondly the user has to make a choice (which gallery to look at) which has to change the iframe. What I have done is that once the webpage has loaded the page in the iframe is it runs a while loop to continuously check if a value has been changed (this value changes depending on what gallery is chosen). However the chrome console is giving me an error which is: "Uncaught TypeError: Cannot call method 'getElementById' of undefined". Here is the javascript in the mainframe where the error is occuring: ('set' by the way is the element that stores the value)

function design()
        {
            document.getElementById('oth1').src = "frames/designs.htm";

            var p = document.getElementsByName('oth1').document.getElementById('set')

            while (p == "0")
            {
                if (p > "0")
                {
                    document.getElementById('oth1').src = "frames/"+ p +".htm";
                }
            }
        }

Next is the whole code of the iframe document:

<!DOCTYPE HTML>

<html>

<head>
    <title>
        My Portfolio
    </title>
    <script>

        function skipper()
        {
            document.getElementById('set').value = "1";
        }

        function blurb()
        {
            document.getElementById('set').value = "2";
        }
    </script>

    <link rel="stylesheet" type="text/css" href="css/designs.css">
</head>

<body>
    <table style="width:1243px;border:0;">

        <tr>
            <td colspan="2" class="push">
            </td>
        </tr>

        <tr>
            <td width="180px">
                <p class="title"> Designs: </p>
            </td>
            <td>
            </td>
        </tr>

        <tr>
            <td id="set" value="0" colspan="5">
                <hr>
            </td>
        </tr>

        <tr>
            <td style="width:213px">
            </td>
            <td style="width:213px">
                <embed class="vid_quick" src="animations/skipperanimation.mov" width="213" height="160" autoplay="true" controller="false" loop="true" pluginspage="http://www.apple.com/quicktime/download/">
                </embed>
            </td>
            <td style="width:213px">
                <embed class="vid_quick" src="animations/blurbanimation.mov" width="213" height="160" autoplay="true" controller="false" loop="true" pluginspage="http://www.apple.com/quicktime/download/">
                </embed>
            </td>
            <td style="width:213px">
            </td>
            <td style="width:213px">
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
                <p class="text">
                    <p class="clickme" onclick="skipper()" id="skipper">Skipper</p>
                </p>
            </td>
            <td>
                <p class="text">
                    <p class="clickme" onclick="blurb()" id="blurb">Blurb</p>
                </p>
            </td>
        </tr>
    </table>
</body>
</html>

Please could you help my solve the problem so i can change the iframe to display the proper gallery.

Thank you very much! :)

Upvotes: 0

Views: 2071

Answers (1)

Lochemage
Lochemage

Reputation: 3974

You are using getElementsByName('oth1') instead of getElementById('oth1'). The first function actually returns an array of all elements found with the given name instead of just one element.

Upvotes: 1

Related Questions