Why is the note object on line 17 null?

Question

JavaScript

Why is the note object on line 17 null?

function makeNote(name, text) {
    this.id = localStorage.length;
    this.name = name;
    this.text = text;
}

function renderNotes() {
    for(key in localStorage) {
        let notesContainer = document.querySelector('.notes-container');
        notesContainer.innerHTML = '';

        let note = JSON.parse(localStorage.getItem(key));
        console.log(note.name)

        let noteBlock = document.createElement('div')
        noteBlock.classList.add('note');
        noteBlock.innerHTML = `<div class="note-header">
                                    <p class="note-name">${note.name}</p>
                                    <div class="note-buttons">
                                        <div class="note-edit">
                                            <img src="./img/edit.svg" alt="edit" fill="#fff">
                                        </div>
                                        <p class="note-close" onclick="modalShow('remove')">X</p>
                                    </div>
                                </div>
                                <p class="note-text">
                                    ${note.text} 
                                </p>`
        
        notesContainer.prepend(noteBlock);
    }
    //Отрисовать элемент
}

function saveNote() {
    let name = document.querySelector('.modal-create-input').value;
    let text = document.querySelector('.modal-create-area').value;
    let note = new makeNote(name, text);

    localStorage.setItem(localStorage.length, JSON.stringify(note));

    renderNotes();
}

function removeNote() {
    //Функция для удаления заметки из localstorage
}

function modalShow(source) {
    let fade = document.querySelector('.modal');
    fade.style.display = 'flex';
    if(source == 'remove') {
        let modal = document.querySelector('.modal-del');
        modal.style.display = 'block';
    }else if(source == 'create') {
        let modal = document.querySelector('.modal-create');
        modal.style.display = 'flex';
    }
}

function modalClose() {
    let fade = document.querySelector('.modal');
    let modalCreate = document.querySelector('.modal-create');
    let modalRemove = document.querySelector('.modal-del');

    fade.style.display = 'none';
    modalCreate.style.display = 'none';
    modalRemove.style.display = 'none';
    
    
}

Answer 1

var noteBlock = document.getElementById('noteBlock')
        noteBlock.classList.add('note');
        noteBlock.innerHTML = `<div class="note-header">
                                    <p class="note-name">${note.name}</p>
                                    <div class="note-buttons">
                                        <div class="note-edit">
                                            <img src="./img/edit.svg" alt="edit" fill="#fff">
                                        </div>
                                        <p class="note-close" onclick="modalShow('remove')">X</p>
                                    </div>
                                </div>
                                <p class="note-text">
                                    ${note.text} 
                                </p>`
        
        notesContainer.prepend(noteBlock);
    }
    //Отрисовать элемент
}

You create an object divthat is, as it were, a "dummy" (that is, not attached)