TamperMonkey can't click button [duplicate]

Question

This question already has an answer here:

• How do I get password fields to be autofilled without requiring user interaction? 1 answer
• Submit autofill (password input field) 1 answer

This is the website I want to use TamperMonkey to click button. This is my script code:

// ==UserScript==
// @name         click
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://secure.timesheets.com/
// @include      https://secure.timesheets.com/default.cfm?page=Login&CFID=*
// @grant        none
// ==/UserScript==
start();
function start() {
    'use strict';
    var domd = document.getElementById('large-button-clockin');
    console.log(domd);
    function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }

    async function demo() {
        console.log('Taking a break...');
        await sleep(10000);
        console.log('Ten second later');
        document.getElementById('large-button-clockin').click();
    }
    demo();
};

It shows:

<button class="largeButton loginButton" name="HourlyClockInButton" id="large-button-clockin" data-login-value="IN" type="button">HOURLY<div>CLOCK IN</div>CLICK HERE</button>
Taking a break...

And when the time arrives, it looks just like it refresh the page not click the button, and the CFID code change to another one. BTW, the browser would fill my form automatically.

But if I just put the code document.getElementById('large-button-clockin').click(); in the console of browser. It would click the code. But I can't do this in the TamperMonkey.

Do you know why?

Edit: I just found the reason, I need to fill the form in the script before I click the button. But the browser has already automatically do that for me. Do you know why I still need to do that in the script?