Why is the dialog box not opening?

Question

i was creating a application using typescript poo but when i click to open the dialog box this is not working.

follow the code blocks below:

index.ts:

import Modal from "./Modal.js"
import { Obj } from "./Modal.js"

const button = document.getElementById('add-btn')
const closeButton = document.getElementById('close-btn')
const dialog = document.querySelector('dialog')

const button2 = document.getElementById('add-btn2')

let valores: Array<Obj> = []

if (button && closeButton && dialog && button2) {
    const modal = new Modal(dialog, valores)
    button.addEventListener('click', modal.openModal)
    closeButton.addEventListener('click', modal.closeModal)
    button2.addEventListener('click', modal.addValues)
}

Modal.ts:

export default class Modal {
    modal;
    valores;
    constructor(modal: HTMLDialogElement | null, valores: Array<Obj>) {
        this.modal = modal
        this.valores = valores
    }
    public openModal(): void {
        this.modal?.showModal()

I think this could be, because the `this` in `openModal` is not the modal instance. You can probably fix this the following way: `button.addEventListener('click', () => modal.openModal())` In case that fixes it, this is probably worth a read: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this (`this` in JS is definitely not the easiest topic) — David, Mar 24 '23 at 18:02
Does this answer your question? [How to access the correct \`this\` inside a callback](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — VLAZ, Mar 24 '23 at 18:03

Why is the dialog box not opening?

0 Answers0