getBoundingClientRect() returns zero values

Why does getBoundingClientRect() return 0 values in init() and normal values when I click the button?

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Example</title>
</head>

<body>
    <button id="startButton">Start Game</button>

    <script type="module">
        let startButton;

        function onStartButtonClick() {
            console.log("Start game");
            console.log(startButton.getBoundingClientRect());
        }

        function init() {
            startButton = document.getElementById("startButton");
            startButton.onclick = onStartButtonClick;
            console.log(startButton.getBoundingClientRect());
        }

        document.addEventListener('DOMContentLoaded', (event) => { init(); });
        //window.onload = () => init();
    </script>
</body>

</html>

plnkr / feedback

getBoundingClientRect() returns zero values #585