How to invoke dialog modal from module instead of using directly showModal() method

Good day! I need to have 2 different models to create projects and todo lists. I've figured out, that for HTML there is only one dialog menu that can be invoked with window.dialog.showModal(); directly. So then, I've created dialogModule file to store dialog model code for project pop-up model. Here is the code inside this module:

export const dialog = document.getElementById("project-dialog");
export const open = document.getElementById("open");
export const cancel = document.getElementById("cancel");
export const close = document.getElementById("close");


export let openModel = open.addEventListener("click", () => {
    dialog.showModal();
});

export let cancelModel = cancel.addEventListener("click", () => {
    dialog.close();
});

export let closeMondel = close.addEventListener("click", () => {
    dialog.close();
});

And when I want to invoke project model menu, nothing happens. Function that supposes invoking model:

import { dialog, open, openModel } from "./dialogModule";

function updateProjectItems(e) {
  openModel;
  const div = e.parentElement.parentElement.querySelector("div");
  projectValue.value = div.innerText;

  updateText = e.parentElement.parentElement.querySelector("div");
  addProjectUpdate.setAttribute("onclick", "UpdateOnSelectionProjects()");
  projectValue.focus();
}

With updating todo list it has window.dialog.showModal();. It works fine:

function UpdateToDoItems(e) {
    if (
      e.parentElement.parentElement.querySelector("div").style.textDecoration ===
      ""
    ) {
      window.dialog.showModal();
      const values = e.parentElement.parentElement.querySelectorAll("#values");
      todoValue.value = values[0].innerText;
      todoDescription.value = values[1].innerText;
      todoDate.value = values[2].innerText;
      todoPriority.value = values[3].innerText;


      updateText = e.parentElement.parentElement.querySelectorAll("#values");
      addUpdate.setAttribute("onclick", "UpdateOnSelectionItems()");
      todoValue.focus();
    }
}

I use variable for projects to summon a pop-up menu, which is not working. What can I do to fix it? Here is my full repo: github repo

posted 19 days ago

CC BY-SA 4.0

18d ago

Sevenfold‭

7 reputation 3 0 0 2