javascript DOMエレメント取得の仕方による挙動の差異

こんにちは
javascript勉強し始めです。
下記のソースコードに関して
btn.onclick = () => {
の箇所(ソースコード43行目)を
document.getElementById("btn").onclick => {
に変更すると動かなくなってしまいます。この挙動の差異は何が原因でしょうか？
どなたかわかる方お願いします。

Javascript
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8" />
5    <title>mebeeサンプル</title>
6    <link
7      rel="stylesheet"
8      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons"
9    />
10    <link
11      rel="stylesheet"
12      href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
13    />
14  </head>
15
16  <style>
17    .main {
18      margin: 0 auto;
19      margin-top: 100px;
20      display: flex;
21      flex-direction: column;
22      align-items: center;
23      font-size: 30px;
24    }
25  </style>
26  <script>
27    hoge = () => {
28      const arr = Array(5)
29        .fill()
30        .map((x) => ~~(Math.random() * 10));
31      disp(arr, "txt1");
32      // 重複を削除したものを表示
33      result.innerHTML = arr.filter((x) => x === 1).length; // document.getElementById('result');を省略
34    };
35    disp = (arr, id) => {
36      let text = [];
37      for (let item of arr) {
38        text.push('<li class="list-group-item">' + item + "</li>");
39      }
40      document.getElementById(id).innerHTML = text.join("");
41    };
42    window.onload = () => {
43      document.getElementById("btn").conlick = () => {
44        hoge();
45      };
46    };
47  </script>
48  <body>
49    <div class="main container">
50      <h2><span class="badge bg-success">ランダムな配列</span></h2>
51      <ul id="txt1" class="list-group list-group-flush"></ul>
52
53      <h2>
54        <span id="result" class="badge bg-success">数字の1をカウント</span>
55      </h2>
56
57      <div class="row">
58        <button id="btn" type="button" class="btn btn-warning">実行</button>
59      </div>
60    </div>
61  </body>
62</html>
63