使用 JavaScript 在页面上显示表单输入

Question

我正在上编程课程，我需要使用 javascript 和 HTML 创建一个“To-Do”列表页面。无论用户在文本框中键入什么，都应显示在页面下方的“To-Do 列表”标题下方。我无法将表单中提交的信息显示在“待办事项”列表标题下方的页面上。到目前为止，这是我的代码。

const formE1 = document.getElementById('todo-form');
const inputE1 = document.getElementById('todo-item');
const list = document.getElementById('to-do');

formE1.addEventListener('submit', function(event) {
    event.preventDefault();
    const li = document.getElementById('the-list');
    document.createElement('li');
    inputE1.appendChild(li);
    console.log(formE1)
})

const input = document.querySelector('ol');
let template = ''
for (let i = 0; i < inputE1.length; i++) {
  const item = `
    <li>
        <p>Name: ${inputE1}</p>
    </li>
  `
  template += item;
}
input.innerHTML = template;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Forms</title>
</head>
<body>
    <h1>Add a Todo</h1>
    <div id="todo-list">
        <form id="todo-form">
          <input type="text" id="todo-item" placeholder="List Item"/>
          <input type="submit" id="todo-add" value="Submit"/>
        </form>
       
        <div id="to-do">
            <h2>To-Do List</h2>
                <ol id="the-list"></ol>
        </div>
      </div>
    
    <script src="main.js"></script>
</body>
</html>

Answer 1

关键是您试图在处理程序之外执行代码。

您可以稍微简化一下代码。例如，没有真正需要 form 元素，因此将侦听器添加到您的按钮。

const button = document.querySelector('button');
const input = document.querySelector('input');
const list = document.querySelector('ol');

button.addEventListener('click', function(e) {
  const li = document.createElement('li');
  li.textContent = input.value;
  list.appendChild(li);
});

<h1>Add a Todo</h1>
<div>
  <input type="text" placeholder="List Item" />
  <button type="button">Submit</button>
  <div>
    <h2>To-Do List</h2>
    <ol></ol>
  </div>
</div>

使用 JavaScript 在页面上显示表单输入

Show form input on page using JavaScript

html

javascript

forms

addeventlistener