I'm stuck on figuring out how to get a function for Note-Taking App

JavaScript
1

Hello freeCodeCamp users! I hope you all are doing well.

I’m currently working on another beginner project and I have run into a small problem. I am working on a feature for my note-taking app and I can’t seem to figure out how to get it to work.

I’ve gotten it to where it will create a new modal and add the contents of the text box into the overlaying modal that will pop up after selecting the “Add Note” button.

Now the part I’m trying to work on is the feature that will close the modal when either the close button is pushed or the overlaying “greyed-out’” overlaying div is clicked on.

Visa-versa when the button with the notes name is clicked on, but I can’t seem to figure out how to add an event listener to the DOM-created elements. Any help on how to resolve these issues and some tips and tricks for future reference would be greatly appreciated!

Thanks!

Here’s the code pen for the project: https://codepen.io/Micah-Iyobebe/pen/ExrWrKV

2

Modal Example

here is somting similar …

3

How would I get it to work with the buttons that are newly created?

4 
function closeNoteDisplay() {
    var overlayDiv = document.getElementById("overlayDiv"); // Assuming you have set an ID for your modal overlay div

    if (overlayDiv) {
        overlayDiv.parentNode.removeChild(overlayDiv); // Remove the modal overlay div
    }

    var modal = noteStorageDiv.querySelector(".modal"); // Assuming you've added a class "modal" to your modal

    if (modal) {
        modal.parentNode.removeChild(modal); // Remove the modal
    }
}
5

Another option is to use a click handler on the document. For this to work you can not use pointer-events: none on #overlayDiv

document.addEventListener("click", ({ target }) => {
  const targetClassList = target.classList;

  // if either one is true remove the overlayDiv and modal elements
  console.log(targetClassList.contains("overlayDiv"));
  console.log(targetClassList.contains("close-button"));
});

As an aside, I might also look into the dialog element for a modal as an alternative.