ストップウォッチで１つのボタンでスタート/ストップ機能を実装させたい。

ストップウォッチで１つのボタンでスタート/ストップ機能を実装させたい。
JavaScriptでストップウォッチを作っているのですが、スタートボタンを押すとストップウォッチが動き、そのボタンがストップボタンに変わるようにしたいのですがうまくいきません。

###エラーメッセージ

main.js:48 Uncaught TypeError: Cannot read property 'addEventListener' of null
    at main.js:48
(anonymous) @ main.js:48

HTML

<h1>LET'S STUDY!!</h1>
<div id="timer">00:00</div>
<div class="controls">    
  <div class="btn" id="start">start</div>
  <div class="btn" id="reset">reset</div>
</div>

```JavaScript
```const timer = document.getElementById('timer');
const start = document.getElementById('start');
const stop = document.getElementById('stop');
const reset = document.getElementById('reset');

let startTime;
let timeOutId;
let passedTime = 0;

function countUp() {
    const d = new Date(Date.now() - startTime + passedTime);
    const m = String(d.getMinutes()).padStart(2, '0');
    const s = String(d.getSeconds()).padStart(2, '0');
    timer.textContent = `${m}:${s}`;
    timeOutId = setTimeout(() => {
        countUp();
    }, 1000);
}

start.addEventListener('click', () => {
    startTime = Date.now();
    countUp();
    start.textContent = 'stop';
    start.id = 'stop';
　　
});


stop.addEventListener('click', () => {
    clearTimeout(timeOutId);
    passedTime += Date.now() - startTime;
    stop.textContent = 'start';
    stop.id = 'start';
});

reset.addEventListener('click', () => {
    timer.textContent = '00:00';
    passedTime = 0;
});