輸入值顯示為未定義

Question

我是 javascript 的新手，正在嘗試制作一個簡單的待辦事項列表。 我有基本功能，但我想了解為什么我的代碼中的輸入值返回未定義？

刪除按鈕添加得很好，所以我知道 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

您的腳本僅在啟動時獲取輸入值，而不是在調用 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);

將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