0

I have three html files, the html(#1) is the menu page that shows images of 3D models where users could click and and direct them to html(#2) with the description of that 3D model.

As you can see this "href" also carries some parameters that html(#3) needs to position the camera view for the users to see an specific angle of the 3D model. Now, the html(#2) which it's description page has html(#3) on an iframe.

I would like to have html(#2) be able to receive these parameters from html(#1) and pass it to html(#3).

I thought that by declaring the src this way: "document.getElementById("pooliframe").src = address;" it would write on iframe's src tag the address variable, but I get this error: Uncaught TypeError: Cannot set property 'src' of null for this code line: document.getElementById("pooliframe").src = address;

Please help me, please!!!

softwaredeveloper
  • 33
  • 7
  • `document.getElementById('pooliframe').src = 'urlhere';` - This is all you need, you need to make sure your other code is effectively running and calling this properly. – James Lalor Jun 05 '18 at 16:55
  • It's best to try searching for the text of the error first. There are usually many questions which reference it and can help you find your answer. – Heretic Monkey Jun 05 '18 at 17:09

1 Answers1

0

Make sure that you include your scripts after the actual #pooliframe element. getElementById possibly returns you null because the element does not yet exist. This snippet demonstrates:

<script type="text/javascript">
  // This will log `null` because #pooliframe does not exist here.
  console.log(document.getElementById('pooliframe'));
</script>

<iframe id="pooliframe" allowfullscreen></iframe>

<script type="text/javascript">
  // But it does exist here:
  console.log(document.getElementById('pooliframe'));
</script>

If you try to write a property src to null you'll get this error:

Uncaught TypeError: Cannot set property 'src' of null

Try it:

// Obviously "pooliframe" does not exist without HTML:
document.getElementById("pooliframe").src = 'some-address';

If you have no control over the element order within the HTML you can also use the DOMContentLoaded event to defer execution of a script until the DOM is fully parsed:

<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function() {
    console.log(document.getElementById('pooliframe'));
  })
</script>

<iframe id="pooliframe" allowfullscreen></iframe>
JJWesterkamp
  • 7,559
  • 1
  • 22
  • 28