输入值显示为未定义

Question

I'm fairly new to javascript and trying to make a simple To Do list work.我是 javascript 的新手，正在尝试制作一个简单的待办事项列表。 I have the basic functionality down, but I'm trying to understand why the input value in my code is returning undefined?我有基本功能，但我想了解为什么我的代码中的输入值返回未定义？

The remove button adds just fine, so I know the function is working.删除按钮添加得很好，所以我知道 function 正在工作。

    <!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" />
        <link rel="stylesheet" href="css/main.css" />
        <title>To Do List</title>
      </head>
      <body>
        <div class="content__container">
          <div class="list__container">
            <div class="header__container">
              <h1 class="header__title">TO DO LIST</h1>
              <input id="header__input" type="text" />
              <button class="header__button">Add</button>
            </div>
            <div class="list__content"></div>
          </div>
        </div>
        <script src="script.js"></script>
      </body>
    </html>

const btn = document.querySelector(".header__button");
const listContent = document.querySelector(".list__content");
let input = document.getElementById("header__input").value;

function addItem() {
  const toDoItem = document.createElement("li");
  const text = document.createTextNode(input);
  const remove = document.createElement("button");

  remove.textContent = "remove";
  remove.classList.add("list__remove");
  toDoItem.classList.add("list__items");

  toDoItem.appendChild(text);
  toDoItem.appendChild(remove);
  listContent.appendChild(toDoItem);
}

btn.addEventListener("click", addItem);

Answer 1

Your script is getting the input value only when it start and not when the function is called.您的脚本仅在启动时获取输入值，而不是在调用 function 时获取输入值。

const btn = document.querySelector(".header__button");

function addItem() {
    const listContent = document.querySelector(".list__content");
    let input = document.getElementById("header__input").value;

    const toDoItem = document.createElement("li");
    const text = document.createTextNode(input);
    const remove = document.createElement("button");

    remove.textContent = "remove";
    remove.classList.add("list__remove");
    toDoItem.classList.add("list__items");

    toDoItem.appendChild(text);
    toDoItem.appendChild(remove);
    listContent.appendChild(toDoItem);
}

btn.addEventListener("click", addItem);

Moving listContent and the input variable into the function will ensure that you get the values every time the function is executed.将listContent和输入变量移动到 function 将确保每次执行 function 时都能获得值。

输入值显示为未定义

问题描述

1 个解决方案

解决方案1
3 已采纳 2022-10-05 20:23:24

输入值显示为未定义

问题描述

1 个解决方案

解决方案1 3 已采纳 2022-10-05 20:23:24

解决方案1
3 已采纳 2022-10-05 20:23:24