Javascriptでulに要素を追加しても消えてしまう

JavaScripuでボタンを押すとul要素にli要素が追加されるコードを書いたのですが、試しに動かしてみると押した瞬間は確かに追加されているのですが、一瞬で消えてしまい元のページに戻ってしまいます。
原因はなんでしょうか。

JavaScript.js
1var inputForm;
2var submitBtn;
3var items;
4
5window.onload = function () {
6    inputForm = document.getElementsByClassName("input-form")[0];
7    submitBtn = document.getElementsByClassName("submit-btn")[0];
8    items = document.getElementsByClassName("items")[0];
9    inputForm.focus();
10}
11
12function addItem() {
13    console.log("テスト");
14    var item = document.createElement('li');
15    var itemText = document.createTextNode("てすと");
16    item.appendChild(itemText);
17    items.appendChild(item);
18}

BuyList.html
1<!DOCTYPE html>
2<html>
3
4<head>
5  <meta charset="utf-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>買い物リスト</title>
8  <link rel="stylesheet" href="style.css">
9</head>
10
11<body>
12<h1>My shopping list</h1>
13<div class="form-container">
14    <p class="form-title">Enter a new item:</p>
15    <form class="forms" onsubmit="addItem()">
16        <input class="input-form" type="text" size="30">
17        <input class="submit-btn" type="submit" value="Add item" />
18    </form>
19</div>
20<div class="list-container">
21    <ul class="items">
22        <li class="list-item">
23            <p class= "item-name">Eggs</p>
24            <input class="delete-btn" type="submit" value="Delete" />
25        </li>
26    </ul>
27</div>
28
29<script type="text/javascript" src="JavaScript.js"></script>
30</body>
31</html>