document.getElementById("#").click(); Cannot read property 'click' of null in iframe

Question

Bit of a confusing one, trying to add keyboard shortcuts for some urls on my page using https://craig.is/killing/mice mousetrap.

I have this to set the keys:

    Mousetrap.bind('up', function() { document.getElementById("n").click(); });
    Mousetrap.bind('down', function() { document.getElementById("s").click(); });   
    Mousetrap.bind('left', function() { document.getElementById("w").click(); });
    Mousetrap.bind('right', function() { document.getElementById("e").click(); });
    Mousetrap.bind('e', function() { document.getElementById("gatherEnergy").click(); });

Then the html for the arrow keys which works fine:

    <area id="n" alt="North" title="North" href="#" onclick="moven();refreshIframe();" shape="poly" coords="49,1,50,45,113,45,110,1" />
    <area id="e" alt="East" title="East" href="#" onclick="movee();refreshIframe();" shape="poly" coords="118,52,156,53,156,113,118,115" />
    <area id="w" alt="West" title="West" href="#" onclick="movew();refreshIframe();" shape="poly" coords="42,52,0,51,1,115,40,117" />
    <area id="s" alt="South" title="South" href="#" onclick="moves();refreshIframe();" shape="poly" coords="49,126,51,164,114,165,112,127" />

Which all works fine and does as intended the urls are clicked on pressing the arrow keys, however when I get to the key "e" I'm using a href rather than an area:

<a href="map.php?act=e" id="gatherEnergy" onclick="refreshIframe();">Gather energy</a>

This returns the error: Uncaught TypeError: Cannot read property 'click' of null

Does document.getElementById(#ID).click(); not work on a hrefs for some reason? Or am I well off the mark? Really confused with this one so any advice would be great!

EDIT: Setup a jsfiddle with it https://jsfiddle.net/Lek3ptvp/ and that works!

On my localhost the url I'm trying to trigger is in a iframe, would this be causing the issue? How do I make the .document.getElementById look in the iframe?

Thanks for the reply @Xufox I'm not sure what you mean? Sorry. — KojoSlayer, Jun 11 '17 at 20:51
The `click` method is not the problem. the `getElementById` function returned null instead of a reference to the element. Is it possible that you accidentally put `#gatherEnergy` instead of `gatherEnergy`? — Omri Luzon, Jun 11 '17 at 20:55
@Ced just did a jsfiddle myself, added an edit. The link is in an iframe. — KojoSlayer, Jun 11 '17 at 21:02
@Ced Yes, tried Mousetrap.bind('e', function() { document.getElementById('gamepan').contentWindow.document.getElementById('gatherEnergy').click(); }); but that gives the error Uncaught TypeError: Cannot read property 'contentWindow' of null — KojoSlayer, Jun 11 '17 at 21:06
@KojoSlayer You need to make sure that the [DOM is loaded](https://stackoverflow.com/q/14028959/4642212) at the time you run this code. — Sebastian Simon, Jun 11 '17 at 21:09
don't listen to him, that's not the problem. Do you own the content within the iframe ? — Ced, Jun 11 '17 at 21:10

Ced · Accepted Answer · 2017-06-11T21:34:48.963

0

Edit: Since you own the content try something like this:

document.getElementById("myiframe").contentWindow.document.getElementById("gatherEnergy").click();

On my localhost the url I'm trying to trigger is in a iframe,

The browser will allow you to interact with iframes as long as the page that is trying to do the interaction and the page that you have loaded have the same document.domain. which is apparently not the case

https://jsfiddle.net/05b8sjy3/

<iframe src="www.google.com">

</iframe>

setTimeout(_ =>document.getElementById("sidebar").click(),2000);

You wouldn't want a website to do stuff on www.mybank.com on the behalf of the user.

edited Jun 11 '17 at 21:34

answered Jun 11 '17 at 21:11

Ced

15,847
14
87
146

I own the content within the iframe, basically a frame within the page that updates on link clicks outside of the iframe. I've got the shotcut key working by putting the mousetrap + gatherEnergy function in the iframe, but the user will have to click into the iframe before the "e" key triggers it. – KojoSlayer Jun 11 '17 at 21:14
@KojoSlayer We can't really help you if you don't put relevant code. All the code you posted above is working code. You even made a working plunker. So we have to read between the lines. – Ced Jun 11 '17 at 21:15
Yeh iFrame is loaded. Heres a screenshot hopefully explains it a bit better than me. http://imgur.com/a/ayf7Z – KojoSlayer Jun 11 '17 at 21:20
@KojoSlayer so your mousetrap function for e, is it in the document or in the iframe ? – Ced Jun 11 '17 at 21:22
the document, users focus is going to be out of the iframe so I need that part of the screen to run the shortcut. – KojoSlayer Jun 11 '17 at 21:24
yes sorry if I'm not explaining things well! I placed the script reference, and the bind into the iframe. This worked but only if I first clicked into the iframe to bring it to focus. I need the shortcut to work when clicked/focus is out of the iframe (arrow key area). – KojoSlayer Jun 11 '17 at 21:27
sorry to be a pain ha. That spits out the error: Uncaught TypeError: Cannot read property 'contentWindow' of null. Iframe is: – KojoSlayer Jun 11 '17 at 21:30
@KojoSlayer you have to give your iframe an `id` of `myiframe`. Also I changed this : `document.getElementById("myiframe").contentWindow.document.getElementById("gatherEnergy").click();` to this: `document.getElementById("myiframe").document.getElementById("gatherEnergy").click();`. I believe both work though. – Ced Jun 11 '17 at 21:32
oh god I was reading name as Id.... never mind ha only worked with the contentWindow version but it worked! Thank you so much! Time for bed I think after that embarrassment. – KojoSlayer Jun 11 '17 at 21:34

document.getElementById("#").click(); Cannot read property 'click' of null in iframe

1 Answers1