Я только что научился создавать и добавлять элементы. Я хотел попрактиковаться в использовании кнопки для отправки текста для добавления. Это работает, однако страница, кажется, обновляет sh сразу после этого и удаляет текст из списка. Что я делаю не так?
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);
}