DOM button is getting clicked with .click() method, but its not working on document itself.

/* Working fine */
function getAlert() {
    alert("Clicked!!!");
}
var btn = document.getElementById('btn');
btn.onclick = getAlert;
btn.click()

/* Should be work  */
document.onclick = getAlert;
document.clicked()

<button id="btn">Click Me!</button>

DOM button is getting clicked with .click() method, but its not working on document itself.

/* Working fine */
function getAlert() {
    alert("Clicked!!!");
}
var btn = document.getElementById('btn');
btn.onclick = getAlert;
btn.click()

/* Should be work  */
document.onclick = getAlert;
document.clicked()

<button id="btn">Click Me!</button>

Please help.

• javascript
• html
• dom
• dom-events

• document.getElementById('btn'); this id is not found in the document. – Jai Commented Aug 6, 2018 at 11:02
• 1 Your attempt at providing a minimal reproducible example demonstrates a number of problems which have nothing to do with the question you are asking. Please test your MCVEs to make sure they are a suitable demonstration of the actual problem you are having. – Quentin Commented Aug 6, 2018 at 11:03

4 Answers 4

document objects are not things that can be clicked on.

Event handlers can be bound to a document, and events will bubble until they reach the document and trigger a handler, but you can't click directly on the document.

document.getElementById('btn') this id is not found in the document, So please add the element id and remove document.clicked() because its not a function on document object.

Here you may please check the working code snippet.

/* Working fine */
function getAlert() {
    alert("Clicked!!!");
}
var btn = document.getElementById('btn');
btn.onclick = getAlert;
btn.click()

/* Should be work  */
document.onclick = getAlert;
//document.clicked()

<button id="btn">Click Me!</button>

As Quentin already explains in his answer, a document object cannot be clicked upon.

Event handlers associated on document execute due to the events bubbling up the DOM. For example, a click event on the button in your snippet traverses the button -> then body -> then document.

So, as an alternative to document.clicked() you attempt in your question, you can trigger the event on body element via, document.body.click().

/* Working fine */
function getAlert() {
    alert("Clicked!!!");
}
var btn = document.getElementById('btn');
btn.onclick = getAlert;
btn.click()

/* Should be work  */
document.onclick = getAlert;
document.body.click()

<button id="btn">Click Me!</button>

You can read more about event bubbling here: What is event bubbling and capturing?

Note: I have added ID attribute to the button in your snippet to ensure that it runs.

you can do this with jquery like this:

$(document).on('click', ()=>{console.log('clicked')})

$(document).click()