Когда браузер выполняет ваш javascrit, у него еще нет ввода и кнопки.Вы можете исправить это с помощью
<!DOCTYPE html>
<html>
<head>
<title>Tasks</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A simple task list for your day-to-day.">
<meta name="author" content="Bruno M. B. Sdoukos">
<meta name="keywords" content="task list, checklist">
</head>
<body>
<ul></ul>
<input type="text" id="taskinput">
<button id="taskcreator">Create new item</button>
<script>
var taskCreator = document.querySelector('#taskcreator');
var list = document.querySelector('ul');
var taskInput = document.querySelector('#taskinput');
taskCreator.addEventListener('click', function createNewTask(event) {
list.innerHTML += '<li>' + taskInput.value + '</li>'
})
</script>
</body>
</html>
или подождать в скрипте, пока не будет проанализирован весь файл.
<script>
document.addEventListener("DOMContentLoaded", function () {
var taskCreator = document.querySelector('#taskcreator');
var list = document.querySelector('ul');
var taskInput = document.querySelector('#taskinput');
taskCreator.addEventListener('click', function createNewTask(event) {
list.innerHTML += '<li>' + taskInput.value + '</li>'
})
});
</script>
https://developer.mozilla.org/ru/docs/Web/Events/DOMContentLoaded