0

I am trying to click a div whose class name is (xyz)

document.querySelector('.header-search-wrap').click();
<iframe src="https://www.gammerson.com" frameborder="0" width="500px" height="900px">
 </iframe>

so I tried to run run below document.querySelector('.xyz').click(); but it gives me 

error Uncaught TypeError: Cannot read property 'click' of null

but when I go to elements windows and search of XYZ class and then again go back to console window of chrome and run below code again 

document.querySelector('.xyz').click();

surprisingly it works. I don't know what is the problem can any one help me solve the problem. I tried multiple time it only works when I open source code in elements window and then run the code.

yuriy636
  • 8,913
  • 5
  • 36
  • 42
David Cring
  • 31
  • 2
  • 5
  • If there is no such element, the result of `document.querySelector('.xyz')` will be `null` and this will cause that error, since your code actually does `null.click()`. Are you sure you have such element in your page? Can you create a working example? snippet/jsfiddle... – Dekel Sep 09 '17 at 21:05
  • Can you update your question with HTML markup? – Danny Fardy Jhonston Bermúdez Sep 09 '17 at 21:05
  • 4
    It sounds like you are loading the script before the page loads. Try putting the script before the closing body tag or put it in the window.onload = function(){/* here */} – Mark Sep 09 '17 at 21:05
  • window.onload = function () {document.querySelector('.xyz').click(); } – Kurohige Sep 09 '17 at 21:09
  • https://jsfiddle.net/ktvvgx4n/ check this jsfiddel – David Cring Sep 09 '17 at 21:12
  • do the same thing that with this example. When you open the console it will show you Uncaught TypeError: Cannot read property 'click' of null but when you search for all .header-search-wrap in elements tab and then again execute document.querySelector('.header-search-wrap').click(); it will show you only undefined this means it works. – David Cring Sep 09 '17 at 21:15
  • 1
    The `.header-search-wrap` is not in the same document. It's inside another document (which is the `iframe`). – Dekel Sep 09 '17 at 21:17
  • so how do it then – David Cring Sep 09 '17 at 21:18

2 Answers2

1

You can't select a element by querying the document like document.querySelector() if the element is a child in an iframe; if you want to, you have to retrieve its document: Javascript - Get element from within an iFrame

But the other thing is that you can't access an iframe which is not in the same origin (well, I guess, you haven't specified) because the "Same-origin policy" applies: SecurityError: Blocked a frame with origin from accessing a cross-origin frame

And about your statament:

When you open the console it will show you Uncaught TypeError: Cannot read property 'click' of null but when you search for all .header-search-wrap in elements tab and then again execute document.querySelector('.header-search-wrap').click(); it will show you only undefined this means it works

This happens because when you inspect an element in said iframe the DevTools' "context" (Chrome Dev Tools: <page context> and <top frame>?) changes to the iframe's and you can use document.querySelector() freely.

yuriy636
  • 8,913
  • 5
  • 36
  • 42
0

Simply whenever you run

document.querySelector('.xyz');

And if it says null that means at that point of time there are no elements with class xyz so calling click() on null results error.

Madhav Chaturvedi
  • 523
  • 4
  • 12
  • jsfiddle.net/ktvvgx4n check this jsfiddel do the same thing that with this example. When you open the console it will show you Uncaught TypeError: Cannot read property 'click' of null but when you search for all .header-search-wrap in elements tab and then again execute document.querySelector('.header-search-wrap').click(); it will show you only undefined this means it works. – David Cring Sep 09 '17 at 21:16