output .appendChild on <li> and <span> elements within a map function

user_19319148 0
Viewed 81

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 class="todo">
      <h1>Todo</h1>
      <form name="todo--form">
        <input type="text" name="todo--input" />
        <button
          type="submit"
          name="todo--submit"
          class="p-2 bg-slate-500 rounded"
        >
          Add
        </button>
      </form>
      <ul class="todo--list"></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.

appendchild javascript
4 Answers
    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;
    });
user_177525870

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 class="p-2 bg-slate-500 rounded">Add</button>
    <ul class="list"></ul>
  </fieldset>
</form>

user_28132240

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;
user_126721160

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;
    });
user_193191480
Related