Why is the page refreshing after I add an item to the To Do list?

I just learned how to create and append items. I wanted to practice using a button to submit the text to be appended. It works, however, the page seems to refresh right afterwards and removes the text from the list. What am I doing wrong?

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To Do List</title>
    <link rel="stylesheet" href="ToDo.css">
</head>
<body>
    <h1>To Do:</h1>
    <ul>
        <li class="todo">Create another todo.</li>
    </ul>

    <form>
        <input type="text" placeholder="Add another item!">
        <button onclick="output()">Add</button>
    </form>

    <script src="ToDo.js"></script>
</body>
</html>

JS:

let ul = document.querySelector('ul');

newItem = document.querySelector('input');

function output() {
    let item = newItem.value;
    let newTodo = document.createElement('li');
    newTodo.innerText = item;
    newTodo.classList.add('todo');
    ul.append(newTodo);
}

Solution

Your button is submitting the form which is causing the page to refresh. Buttons are made to be type submit by default.

It looks like you don't actually need the form so you could either remove it or set the type on the button:

<button type="button" onclick="output()">Add</button>