Welcome to Software Development on Codidact!

Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.

Review Suggested Edit

You can't approve or reject suggested edits because you haven't yet earned the Edit Posts ability.

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

How to invoke dialog modal from module instead of directly using the 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](https://github.com/DanMarkov/todo-app)~~

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?

javascript

Communities

Review Suggested Edit