че за Cannot read property 'insertAdjacentHTML' of null at HTMLInputElement. ?
вроде в конце вставил скрипт, даже async добавил.
не работает именно в addEventListener
<body>
<section class="todoapp">
<header class="header">
<h1>todos</h1>
<input class="new-todo" placeholder="what nees to be done?" />
</header>
</section>
<section class="main">
<ul class="todo-list">
<li class="completed">
<input class="toggle" type="checkbox" id="todo-1" />
<label for="todo-1">HTML</label>
<button class="destroy">delete</button>
</li>
<li class="completed">
<input class="toggle" type="checkbox" id="todo-2" />
<label for="todo-2">HTML</label>
<button class="destroy">delete</button>
</li>
<li>
<input class="toggle" type="checkbox" id="todo-3" />
<label for="todo-3">HTML</label>
<button class="destroy">delete</button>
</li>
</ul>
</section>
<footer>
</footer>
<script async src="script.js" type=text/javascript></script>
</body>
let root = document.querySelector('.todoapp');
let newTodoField = root.querySelector('.new-todo');
newTodoField.addEventListener('keydown', (e) =>{
if(e.key !== 'Enter'){
return;
}else if (!newTodoField.value){
return;
}
const id = +new Date();
let itemsList = root.querySelector('.todo-list')
console.log(itemsList);
itemsList.insertAdjacentHTML('beforeend',`<li>
<input class="toggle" type="checkbox" id="todo-${id}" />
<label for="todo-${id}">${newTodoField.value}</label>
<button class="destroy"></button>
</li>`);
newTodoField.value = '';
});
