How to grab the value from an input and store the input value as the text of a new list item?-CodePudding

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 >
</ul>

CodePudding user response：

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>

CodePudding user response：

You are missing a . in todos selector.

document.querySelector(".todos").append(create)