0

This is my index.js

let todolist = [{id:1 , label: "일어나기", completed: false}];

const renderTodo = async (todo) => {
    const todoWrapper = document.createElement('div');
    todoWrapper.classList.add("todo-wrapper");
    todoWrapper.id = todo.id;

    console.log(todoWrapper.id);
    console.log(todoWrapper);
    console.log(document.getElementById(todo.id));
 
    const todoLabel = document.createElement('p');
    todoLabel.className="todo-label";
    todoWrapper.appendChild(todoLabel)
    todoLabel.innerText=todo.label;

    const todoActionWrapper = document.createElement('div');
    todoActionWrapper.className="todo-action-wrapper";
    todoWrapper.appendChild(todoActionWrapper);

    const completeButton = document.createElement('button');
    completeButton.classList.add('todo-action');
    completeButton.classList.add('complete');

    if (!todo.completed){
         completeButton.innerText="완료";
    }
    else {
        completeButton.innerText="미완료";
    }
    todoActionWrapper.appendChild(completeButton);
 

 
    const deleteButton = document.createElement('button'); 
    deleteButton.classList.add('todo-action');
    deleteButton.classList.add('delete');
    todoActionWrapper.appendChild(deleteButton); 
    deleteButton.innerText='삭제';

 
    const addButton = document.getElementById('add-action');

    const content = document.getElementById('content');
    content.appendChild(todoWrapper);
 
 }
 
 const renderTodoList = () => {
     const content = document.getElementById('content');
     content.innerHTML ="";
     todolist.forEach((todo) => {
         renderTodo(todo);
     })
 }
 
 renderTodoList();

this is my index.html

<!DOCTYPE html>
<html>
    <head></head>
        <title>TO-DO web</title>
        <link href="./index.css" rel="stylesheet"/>
        <!-- <script src = "./index.js" defer></script> -->
    <body>
        <h1 id="title">오늘 할 일</h1>
        <div id="content">
        </div>
         <div id="action-wrapper">
            <button id="add-action">+</button>
        </div> 
        <script src = "./index.js" defer></script>
    </body> 
</html>

In the renderTodo function of the index.js

console.log(todoWrapper.id);
console.log(todoWrapper);
console.log(document.getElementById(todo.id));

logs

1
'<div class="todo-wrapper" id="1">...</div>'
null

I expected that console.log(document.getElementById(todo.id)) logs '<div class="todo-wrapper" id="1">...</div>'.

But it logs null. I don't know why this is null even though the todoWrapper is not null.

Please tell me how to fix it for getElementById to return the proper element.

derloopkat
  • 6,232
  • 16
  • 38
  • 45
offtheglass
  • 11
  • 4

1 Answers1

1

The console.log(document.getElementById(todo.id)); is executed before the element with id 1 is added to the document.

You add the element at

content.appendChild(todoWrapper);

If you move the console.log after this line, you will get the output expected:

...
const addButton = document.getElementById('add-action');

const content = document.getElementById('content');
content.appendChild(todoWrapper);

console.log(document.getElementById(todo.id));
Clara
  • 51
  • 5