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

I need to have 2 different models to create projects and to-do 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 a dialogModule file to store the dialog model code for the 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();
});

When I try to invoke the project model menu, nothing happens. The function that attempts invoking the 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?

posted about 2 months ago

CC BY-SA 4.0

27d ago by Andreas witnessed the end of the world today‭

Sevenfold‭

3 reputation 3 0 -2 2