My onclick event is firing when I click anywhere on the document.

If I make an inline onclick event in HTML, the onclick works as expected.

My goal is to make it so that code() only executes when I click on the #top element.

```js
top = document.querySelector("#top");
let topActive = false;
top.onclick = code;
function code () {
    console.log("This executes if I click anywhere on the document");
}
```

```css
* {
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    min-height: 100vh;
}

.container {
    height: 100vh;
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr;
}

#top {
    cursor: pointer;
    background-color: #5b6078;
}

#bottom {
    cursor: pointer;
    background-color: #24273a;
}
```

```html
<html>
    <head>
        <title>Audio</title>
        <link rel="stylesheet" href="index.css" />
    </head>
    <body>
        <div class="container">
            <div id="top" onclick="console.log('This executes only when I click #top')"></div>
            <div id="bottom"></div>
        </div>
        <script src="test.js"></script>
    </body>
</html>
```