When the user clicks the button with the ID of generate-todo, I want to grab the value from the input with the ID of new-todo, and store the input value as the text of a new list item and append that new item to the unordered list with the class of todos. This is what I’ve tried so far but I’m missing something.
let todo = document.querySelector('#generate-todo').addEventListener('click', function() {
todo = document.querySelector('#new-todo').value;
const create = document.createElement('li');
document.querySelector('.todos').append(create);
});<label for="new-todo">Add a new item to the list:</label>
<input id="new-todo" type="text">
<button id="generate-todo">Add to the List!</button>
<h1>List of things to do</h1>
<ul class="todos">
</ul>>Solution :
this should get you started
document.getElementById('generate-todo').addEventListener('click', function() {
let todo = document.getElementById('new-todo').value;
const li = document.createElement('li');
li.innerText = todo;
document.getElementById('todos').append(li);
});<label for="new-todo">Add a new item to the list:</label>
<input id="new-todo" type="text">
<button id="generate-todo">Add to the List!</button>
<h1>List of things to do</h1>
<ul id="todos">
</ul>