JavaScriptにて、classList.toggleの実装

ボタンを押したら下記の内容を実装したいのですがなぜか反映されません。
おかしい部分を教えて欲しいです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>JavaScript DOM編</title>
6
7  <style>
8    .my-color {
9      color: yellow;
10      background-color: black;
11    }
12
13    .my-border {
14      border-bottom: 4px solid yellow;
15    }
16  </style>
17</head>
18<body>
19  <button>Run</button>
20
21  <h1 id="target" title="見出しです" class="my-border">dotinstall</h1>
22  <p>サンプルテキスト</p>
23  <p>サンプルテキスト</p>
24  <p>サンプルテキスト</p>
25  
26  <script src="main.js"></script>
27</body>
28</html>

JavaScript
1'use script'
2
3{
4  function update() {
5    // document.querySelector('h1').textContent = 'Changed!';
6    // document.querySelector('#target').textContent = 'Changed!';
7    
8  }
9
10  document.querySelector('button').addEventListener('click', () => {
11    const targetNode = document.getElementById('target');
12
13    targetNode.textContent = 'Changed!';
14    targetNode.title = 'This is title!';
15    targetNode.style.color = 'white';
16    targetNode.style.backgroundColor = 'black';
17    targetNode.className = 'my-color my-border';
18    targetNode.classList.add('my-color');
19    // ここを実装したい
20    if (targetNode.classList.contains('my-color') === true) {
21      targetNode.classList.remove('my-color');
22    } else {
23      targetNode.classList.add('my-color');
24    }
25
26    targetNode.classList.toggle('my-color');
27    
28    // document.querySelectorAll('p').forEach((p, index) => {
29    //   p.textContent = `${index}番目の文章です！`;
30    // });
31  })
32}