寻找为什么在将任务添加到待办事项时列表不显示

Question

大家好，

我正在创建一个待办事项应用程序，到目前为止，当我通过输入输入任务时，控制台会显示我的对象正在触发，但不会在屏幕上显示它。请看看我的代码并帮助我指出问题，我今天已经调试了一段时间。

HTML:

 <!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/to-doStylesheet.css">
    
    <title>To-Do App</title>
</head>
<body>
    
    <div class=container>
        <div class= base>
            <div class = screen>
                <img src="images/WarGreymon_Render.png" alt="Wargreymon">
                <div id ="speach-bubble"> What is on your 
                    agenda for today?
                </div>
                <div class = "dateTime">
                </div>
            </div>
           
    <div class = "nameInput" id = "inputContainer">
        <form class ="form">
            <input type="text" class ="userInput" placeholder="Add Agenda and press enter">
            <input type="submit" value ="Add">   
        </form>
        
    </div>
    </div>

<ul class="list"></ul>

    <script src="js/add-task.js"></script>
</body>
</html>

CSS

.form
{
  margin-left: 400px;
}

.userInput
{
    width: 394px;
    height: 30px;
    background-color: #B62626;
    font-family: Digimon Basic;
    color: #33D61A;
    margin-left: -359px;
}

.userInput ::placeholder
{
    color: #33D61A;
    font-family: Digimon Basic;
}

.list:empty
{
  display: none;
}

.list
{
  list-style: none;
  margin-bottom: 20px;
}

.input[type="checkbox"] {
  display: none;
}

.tick {
  width: 30px;
  height: 30px;
  border: 3px solid #333;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.todo-item {
  margin-bottom: 10px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.todo-item span {
  flex-grow: 1;
  margin-left: 10px;
  margin-right: 10px;
  font-size: 22px;
}

JS

let tasks = [];

const currentdt = new Date()

function todo(text) {
  const todo = {
    text,
    checked: false,
    id: Date.now(),
    timestamp: currentdt
  };

  tasks.push(todo);
  console.log(tasks);
}

// Select the form element
const form = document.querySelector('.form');
// Add a submit event listener
form.addEventListener('submit', event => {
  // prevent page refresh on form submission
  event.preventDefault();
  // select the text input
  const input = document.querySelector('.userInput');

  // Get the value of the input and remove whitespace
  const text = input.value.trim();
  if (text !== '') {
    todo(text);
    input.value = '';
    input.focus();
  }
});

//This function is to display new to do on the screen
function displaytasks(todo)
{
    const list = document.querySelector('list');

    const isChecked = todo.checked ? 'done': '';

    const addedList = document.createElement("li");

    addedList.setAttribute('class', `todo-item ${isChecked}`);

    addedList.setAttribute('data-key', todo.timestamp);

    addedList.innerHTML = `<input id="${todo.timestamp}" type="checkbox"/>
    <label for="${todo.timestamp}" class="tick js-tick"></label>
    <span>${todo.text}</span>
    <button class="delete-todo js-delete-todo">
    <img class = "delete" src="images/delete.png" alt="delete icon">
    </button>`;

    list.append(addedList);
}

所以我现在忙于 js 文件，我认为它必须对内部做一些事情HTML，但我不确定那里到底出了什么问题，因为当我查看HTML 端的控制台我没有看到 <ul class="list"></ul> 触发新的 HTML 元素。

非常感谢您的帮助

Answer 1

显示待办事项的代码似乎没有被调用，所以我建议您在读取新的待办事项后添加一个函数调用。

  ...
  const text = input.value.trim();
  if (text !== '') {
    todo(text);
    input.value = '';
    input.focus();
    displaytasks(tasks); // Show tasks after submission
  }
});

//This function is to display new to do on the screen
function displaytasks(todo)
{
    const list = document.querySelector('.list');
    ...

寻找为什么在将任务添加到待办事项时列表不显示

looking for why list does not display when adding task to the to do

javascript

html

list

dom