时间戳

首页 > 解决方案 > “李”元素显示为“未定义”

javascript - “李”元素显示为“未定义”

问题描述

开始自己做todo list来练习JS

当我将文本/任务添加到待办事项时，HTML 文本显示 -

不明确的

确保 getElementbyId 等是正确的，但不确定是否遗漏了什么。设计很垃圾，就是想试试JS。

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link type="text/css" rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
        <title>To doist</title>
    </head>
    <body>
      <div class= "main-title-bar">
        <h1>To doist</h1>
      </div>
      <div id = "button">
        <button>+</button>
      </div>
      <div class = "input" id = "input">
        <input type="text" class="add_tast" placeholder="Task">
        <span onclick="newElement()" onkeypress="newElement()" class="addBtn">Add</span>
      </div>
      <div class = "todo-list">
          <ul id="myUL">

         </ul>
      </div>
      <script src="js/app.js"></script>
   </body>
</html>

JAVASCRIPT

//Click button to get input field

let button = document.getElementById('button')

button.addEventListener("click",showInput)

function showInput(event){
    if(event.type === "click"){
    input.classList.toggle("show")
}
}
const input = document.querySelector(".input")

// Create new element for the classList

function newElement(){
  let li = document.createElement("li");
  let inputValue = document.getElementById("input").value;
  let t = document.createTextNode(inputValue);
  li.appendChild(t);
  if (inputValue === ''){
    alert("You must write something!");
  } else {
    document.getElementById("myUL").appendChild(li);
  }
  document.getElementById("input").value = "";
  console.log('Is it working?');
}

期望在 HTML 上看到我的任务名称，例如“去健身房”

标签： javascripthtml

解决方案

你已经给id="input"了 div 而不是 input 元素。将 id 提供给输入，它将起作用

let button = document.getElementById('button')

button.addEventListener("click",showInput)

function showInput(event){
    if(event.type === "click"){
    input.classList.toggle("show")
}
}
const input = document.querySelector(".input")

function newElement(){
  let li = document.createElement("li");
  let inputValue = document.getElementById("input").value;
  let t = document.createTextNode(inputValue);
  li.appendChild(t);
  if (inputValue === ''){
    alert("You must write something!");
  } else {
    document.getElementById("myUL").appendChild(li);
  }
  document.getElementById("input").value = "";
  console.log('Is it working?');
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link type="text/css" rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
        <title>To doist</title>
    </head>
    <body>
      <div class= "main-title-bar">
        <h1>To doist</h1>
      </div>
      <div id = "button">
        <button>+</button>
      </div>
      <div class = "input" >
        <input type="text" id = "input" class="add_tast" placeholder="Task">
        <span onclick="newElement()" onkeypress="newElement()" class="addBtn">Add</span>
      </div>
      <div class = "todo-list">
          <ul id="myUL">

         </ul>
      </div>
      <script src="js/app.js"></script>
   </body>
</html>

推荐阅读