javascript - 在 map 函数中的 和 元素上输出 .appendChild

Question

我将待办事项存储在一个对象数组中。我想映射数组以获取 HTML 元素。我可以使用 innerHTML 来做到这一点但我想用 createElement 来做.

我期待 <li><span>TEXT</span></li>输出，但我只得到 span . append 似乎不起作用。

HTML 代码:

<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 代码:

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

我只得到 <span><span>作为输出。

Answer 1

当 <form>提交时，一次只有一个项目被附加到列表中，因此无需构建一个项目数组。顺便说一句，事件处理程序(绑定(bind)到事件的函数)不会像普通函数那样返回值，但是有间接的方法可以从它们获取值(比如从您的 OP 代码，函数推送对象之外的数组)。

详情在示例中注释

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