【JavaScript】Todoリストでのエラー

Todoリストを作成しているのですが、「追加」ボタンを押すとなぜか一瞬タスクが表示されてから、すぐに消えてしまいます。
3時間ほど考えてみても原因がわからず、ここで質問させていただきます。

●具体的な状況
以下のような動作になっています。

●ソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="wclassth=device-wclassth, initial-scale=1.0">
6  <title>Document</title>
7  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
8  <link rel="stylesheet" href="style.css">
9</head>
10<body>
11  <div class="container">
12    <h1>Todoリスト</h1>
13
14    <ul class="list-group todos"></ul>
15
16    <form class="add my-4">
17        <label class="d-block font-weight-bold">新規タスクの追加</label>
18        <input type="text" class="form-control col-4 d-inline-block add-text" name="add" placeholder="New Text">
19        <button class="add-btn d-inline-block col-1">追加</button>
20    </form>
21  </div>
22
23  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
24  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
25  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
26  <script src="js/main.js"></script>
27</body>
28</html>

JavaScript
1const todos = [];
2const input = document.querySelector('.add-text');
3const addButton = document.querySelector('.add-btn');
4const ul = document.querySelector('.todos');
5
6const showTodo = () => {
7  // HTML上の表示を一旦リセットする
8  while(ul.firstChild) {
9    ul.removeChild(ul.firstChild);
10  }
11  todos.forEach((todo, index) => {
12    // ulに追加するためにliタグの作成、todos内の配列を代入
13    const liElement = document.createElement('li');
14    liElement.textContent = `${index + 1} : ${todo}`;
15
16    // デリートボタンの作成
17    const deleteButton = document.createElement('button');
18    deleteButton.textContent = '削除';
19
20    //作成した要素をHTML上に表示させる
21    liElement.appendChild(deleteButton);
22    ul.appendChild(liElement);
23  });
24};
25
26addButton.addEventListener('click', event => {
27  const todo = input.value;
28  input.value = '';
29  if(todo && todo.match(/\S/g)){
30    todos.push(todo);
31    showTodo();
32  }
33});

解決方法がわかる方がいれば、是非教えてください。
よろしくお願いします。

2020年09月27日追記
keiさんありがとうございます。うまくいきました。

行動規範の内容に同意します

回答1件

ベストアンサー

HTML
1<button class="add-btn d-inline-block col-1">追加</button>
2```を
3```HTML
4<button type="button" class="add-btn d-inline-block col-1">追加</button>
5```にしてみてください。
6
7
8【<button>: ボタン要素 - HTML: HyperText Markup Language | MDN】
9[https://developer.mozilla.org/ja/docs/Web/HTML/Element/button](https://developer.mozilla.org/ja/docs/Web/HTML/Element/button)