I am storing the todo-items on an array of objects. I want to map the array to get the HTML elements. I am able to do this using innerHTML but I want to do it with createElement.

I am expecting <li><span>TEXT</span></li> output but I am getting only span. It seems append is not working.

HTML code :

<div >
      <h1>Todo</h1>
      <form name="todo--form">
        <input type="text" name="todo--input" />
        <button
          type="submit"
          name="todo--submit"
          
        >
          Add
        </button>
      </form>
      <ul ></ul>
    </div>

JS Code :

const addTodoForm = document.querySelector(`[name="todo--form"]`);
const todoList = document.querySelector('.todo--list');
const todos = [];

// function getLabel() {}

function handleSubmit(e) {
  e.preventDefault();
  const text = this.querySelector(`[name="todo--input"]`).value;
  const item = {
    text: text,
    finished: false,
  };

  if (text) {
    todos.push(item);
    addTodoForm.reset();
    const todoItems = todos.map((todo, i) => {
      let newSpan = document.createElement('span');
      let newLi = document.createElement('li');
      newSpan.textContent = todo.text;
      let newEl = newLi.append(newSpan);
      return newEl;
    });
    console.log(todoItems);
    todoList.append(...todoItems);
  }
  return;
}

addTodoForm.addEventListener('submit', handleSubmit);

I am getting only <span><span> as output.

CodePudding user response：

    const todoItems = todos.map((todo, i) => {
     let newSpan = document.createElement('span');
     let newLi = document.createElement('li');
     newSpan.textContent = todo.text;
     let newEl = newLi.append(newSpan);
     return newLi;
    });

CodePudding user response：

In this block of code, I believe the newEl variable being created isn't correct. Try changing newLi.append(newSpan) to newLi.appendChild(newSpan)

This is also listed below

  if (text) {
    todos.push(item);
    addTodoForm.reset();
    const todoItems = todos.map((todo, i) => {
      let newSpan = document.createElement('span');
      let newLi = document.createElement('li');
      newSpan.textContent = todo.text;
      let newEl = newLi.appendChild(newSpan);
      return newEl;
    });
    console.log(todoItems);
    todoList.append(...todoItems);
  }
  return;

CodePudding user response：

Thanks for all the answers. Upon reading on the documentation of append and appendChild, it seems elements cannot be saved into a variable upon using these methods.

I just need to return the append li element.

   const todoItems = todos.map((todo, i) => {
      let newSpan = document.createElement('span');
      let newLi = document.createElement('li');
      newLi.setAttribute('data-index', i);
      const todoTextNode = document.createTextNode(todo.text);
      newSpan.appendChild(todoTextNode);
      newLi.appendChild(newSpan);
      return newLi;
    });

CodePudding user response：

When the <form> is submitted there's only one item being appended to list at a time so there's no need to build a one item array. BTW event handlers (functions that are bound to an event) don't return values like a normal function can, but there are indirect ways to get values from them (like from your OP code, that array outside of the function pushing objects).

Details are commented in example

// Reference <form>
const form = document.forms.todo;
// Reference <ul>
const list = document.querySelector('.list');
// Define array for storage
let tasks = [];

// Bind "submit" event to <form>
form.onsubmit = handleSubmit;

// Event handlers passes Event Object by default
function handleSubmit(e) {
  // Stop default behavior during a "submit"
  e.preventDefault();
  // Reference all form controls
  const IO = this.elements;

  /*
  Define {item}
  Add current timestamp to object {item}
  Add <input> text to {item}
  Add {item} to [tasks]
  Clear <input>
  */
  let item = {};
  item.log = Date.now();
  item.task = IO.data.value;
  tasks.push(item);
  IO.data.value = '';

  /*
  Create <time>
  Assign timestamp <time>
  Convert timestamp into a readable date and time
  Add formatted datetime as text to <time>
  */
  const log = document.createElement('time');
  log.datetime = item.log;
  let date = new Date(item.log);
  log.textContent = date.toLocaleString();

  /*
  Create <output>
  Add text of <input> to <output>
  */
  const txt = document.createElement('output');
  txt.value = item.task;

  /*
  Create <button>
  Add type, class, and the text: "Delete" to <button>
  */
  const btn = document.createElement('button');
  btn.type = 'button';
  btn.className = 'delete';
  btn.textContent = 'Delete';

  // Create <li>
  const li = document.createElement('li');

  // Append like crazy
  li.append(log);
  li.append(txt);
  li.append(btn);
  list.append(li);
  console.log(tasks);
}

html {
  font: 300 2ch/1.2 'Segoe UI';
}

input,
button {
  font: inherit;
}

output {
  display: inline-block;
  margin: 0 8px 8px;
}

button {
  cursor: pointer;
}

.as-console-row::after {
  width: 0;
  font-size: 0;
}

.as-console-row-code {
  width: 100%;
  word-break: break-word;
}

.as-console-wrapper {
  max-height: 30% !important;
  max-width: 100%;
}

<form id='todo'>
  <fieldset>
    <legend>ToDo List</legend>
    <input id='data' type="text" required>
    <button >Add</button>
    <ul ></ul>
  </fieldset>
</form>