-3

I am trying to create a javascript to-do list, but I am having a problem:

const inputEl = document.querySelector('form');    
const buttonEl = document.querySelector('.todo-button');
const todoUl = document.querySelector('.list');

buttonEl.addEventListener('click', (addTodo)=> {

});

function addTodo() {
    //add div with class of 'todo'
    const todoDiv = document.createElement('div');
    todoDiv.classList.add('todo')

    //create li
    const todoLi = document.createElement('li');
    todoLi.innerText = inputEl.value;
    todoDiv.appendChild(todoLi);

    //create button
    const todoButton = document.createElement('button');
    todoButton.innerHTML = `<i class="fa-sharp fa-solid fa-trash trash"></i>`;
    todoDiv.appendChild(todoButton);

    //append all to todoLi

    todoUl.appendChild(todoDiv);
}

For some reason, it is not working and I do not know why! Please help me, Thank you!

Shlomo
  • 3
  • 3
Gad Ashell
  • 25
  • 4
  • 2
    Start with why you *think* you missed something. What problem are you observing? This is a good opportunity to start familiarizing yourself with your browser's debugging tools, checking for errors on the console, using the script debugger to step through the code and observe the behaviors, etc. (Note also that it's not only possible but *very likely* that this code has *multiple* problems, so you'll want to narrow down and focus on one at a time rather than just "it doesn't work".) – David Jul 10 '23 at 13:10
  • `const inputEl = document.querySelector('form');` your form has no value attribute so this `todoLi.innerText = inputEl.value;` won't do anything – Chris G Jul 10 '23 at 13:15
  • At a glance, the `click` event listener is empty. It's not clear what you expect that syntax to do, but I suspect you're looking for: `buttonEl.addEventListener('click', addTodo);` Currently the code is just assigning an empty function as the click listener, and naming the passed `Event` object `addTodo`, which won't do anything. Additionally, I'd expect this `
    ` to reload the page by default. It doesn't look like you intend to *use* the `
    ` for anything, so you might remove it. Otherwise you'll need to change `
    – David Jul 10 '23 at 13:20
  • you to do list will be gone on page reload tho unless you use a `database` or a `localStorage` – Chris G Jul 10 '23 at 13:33
  • Here is my version since I did not get a chance to post it [delegated delete](https://jsfiddle.net/mplungjan/egoztkw9/) – mplungjan Jul 10 '23 at 13:41
  • Removing the html is not going to help. This site is about asking one question. In this case, you need to show your complete code so we can duplicate it, what you are expecting, what you are seeing and the steps you have taken to find Have you tried singlestepping through your code ?out whats wrong. – Rohit Gupta Jul 22 '23 at 13:37

1 Answers1

1

You should add <li> elements to the <ul>, not <div> elements.

Also, you should use the submit event. This way you can trigger an add by pressing enter in the input field. Since this is a form, you can make the text required upon submission. This gives you free form validation. The name of the form input should be more specific; try task instead of input.

Finally, the addTodo function should only accept a text string.

const formEl = document.querySelector('form');
const todoUl = document.querySelector('.list');
const pendingSpan = document.querySelector('.pending');
const clearBtn = document.querySelector('.clear');

formEl.addEventListener('submit', (e) => {
  e.preventDefault();
  addTodo(e.target.elements.task.value.trim());
  e.target.reset();
  pendingSpan.textContent = todoUl.children.length;
});

todoUl.addEventListener('click', (e) => {
  if (e.target.classList.contains('trash')) {
    e.target.closest('.todo').remove();
    pendingSpan.textContent = todoUl.children.length;
  }
});

clearBtn.addEventListener('click', (e) => {
  todoUl.innerHTML = '';
  pendingSpan.textContent = '0';
});

function addTodo(text) {
  // Add LI with class of 'todo'
  const todoLi = document.createElement('li');
  todoLi.classList.add('todo')

  // Create SPAN
  const todoSpan = document.createElement('span');
  todoSpan.innerText = text;
  todoLi.appendChild(todoSpan);

  // Create BUTTON
  const todoButton = document.createElement('button');
  todoButton.innerHTML = `<i class="fa-sharp fa-solid fa-trash trash"></i>`;
  todoLi.appendChild(todoButton);

  // Append each LI to UL
  todoUl.appendChild(todoLi);
}
.todo > span {
  display: inline-block;
  min-width: 10em;
}

.todo > button > i.trash {
  color: red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
<h1>Todo App</h1>
<form autocomplete="off">
  <input type="text" name="task" id="task" placeholder="Enter a task..." required>
  <button type="submit" class="todo-button"><i class="fa-solid fa-plus plus"></i></button>
</form>
<div class="todo-container">
  <ul class="list">
    <!--
      <div class="todo">
        <li>Create something</li>
        <button><i class="fa-sharp fa-solid fa-trash trash"></i></button>
      </div>
    -->
  </ul>
</div>

<div class="todo-pending">
  <p>You have <span class="pending">0</span> pending task(s)</p>
  <button class="clear">Clear All</button>
</div>
Mr. Polywhirl
  • 42,981
  • 12
  • 84
  • 132