I am using the following JS code in a function to logout of a website on Chrome:
var docLogout = document.querySelector('.submit.logout');
docLogout.click();
I get error:
'Uncaught TypeError: Cannot read property 'click' of undefined'
This is because I need to make sure that the class of the button exists first and I do that with following steps which I figured out:
Use "select an element in page to inspect it" button (first button on the far left of the developer tools)
Click on the Logout button to inspect it
- The Elemets tab opens up
- The Elements field highlights the line
<button type="submit" class="submit logout">Log out</button> - I then click on the Console tab
- Paste my code again and it works (any button on the same page will work thereafter)
How can I avoid this manual step of making the elements be known first with the above steps? is there a way to expand all DOM elements initially when the website loads a different page to avoid "Cannot read property 'click' of undefined'" error without any human interaction of using the inspect elements button first?
NOTE: at least explain the donevotes so that I can engage you!!!!!!
I am using the following JS code in a function to logout of a website on Chrome:
var docLogout = document.querySelector('.submit.logout');
docLogout.click();
I get error:
'Uncaught TypeError: Cannot read property 'click' of undefined'
This is because I need to make sure that the class of the button exists first and I do that with following steps which I figured out:
Use "select an element in page to inspect it" button (first button on the far left of the developer tools)
Click on the Logout button to inspect it
- The Elemets tab opens up
- The Elements field highlights the line
<button type="submit" class="submit logout">Log out</button> - I then click on the Console tab
- Paste my code again and it works (any button on the same page will work thereafter)
How can I avoid this manual step of making the elements be known first with the above steps? is there a way to expand all DOM elements initially when the website loads a different page to avoid "Cannot read property 'click' of undefined'" error without any human interaction of using the inspect elements button first?
NOTE: at least explain the donevotes so that I can engage you!!!!!!
Share Improve this question edited Apr 20, 2019 at 8:33 user3560827 asked Apr 20, 2019 at 6:55 user3560827user3560827 6941 gold badge7 silver badges24 bronze badges 4- you misspelled ('.submit.logut'); shouldn't it be .logout? – Icewine Commented Apr 20, 2019 at 6:58
- @Icewine I fixed the mispell (I was typing in manually) the question still stands though – user3560827 Commented Apr 20, 2019 at 7:02
-
Did you try wrapping your code in a
DOMContentLoadedlistener? – connexo Commented Apr 20, 2019 at 7:18 - no i did not, furthermore, if i have 2 buttons on the same page, i.e one button to logout and another to select a different tab, the code to click a button will only work for the button i inspected, if i inspect button A I can click button A with JS and will get error if it tries to click button B, if I inspect button B JS it will click button B and give error if it tries to click button A, however if button B C D are of the same type (example choosing different tabs) they will all work if I inspect only one of them.. – user3560827 Commented Apr 20, 2019 at 7:27
2 Answers
Reset to default 2docLogout is undefined, meaning there is no element in the document with classes submit and logout at this time
If it is possible to manually inspect the page and find <button class="submit logout">, then the code is probably running before the <button> was attached to the DOM.
Solution: Make sure the code is running after the DOM has attached the <button>.
One way to do this is put <script> just before the </body> closing tag, e.g.,
<!doctype html>
<html>
<head></head>
<body>
<button class="submit logout">Logout</button>
<script>
/* button is attached to the DOM at this point */
const docLogout = document.querySelector('.submit.logout')
docLogout.click()
<script>
</body>
</html>
Another solution is to run code after the window's load event, e.g.,
window.addEventListener('load', () => {
document.querySelector('.submit.logout').click()
})
If possible, I would remend giving the button an id and using document.getElementById
seems you are not using the selector correctly. you can put the break put on this line check why it is ing null / undefined use f12 and go to source and search the js file and put the break-point on this give line to debug it.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744308934a4567855.html
评论列表（0条）