Estoy haciendo un módulo que muestra un modal. Agregué un botón en modal para cerrarlo y agregué this.hide ya que está haciendo clic pero esto no cierra el modal
código:
class Modal { constructor(content, allowclose, onclose) { this.content = content; this.allowclose = allowclose || true; this.onclose = onclose; // console.log(this.content) document.body.innerHTML += `<div id='modal-js-bg'><div id='modal-js-main'><div id='modal-js-content'>${this.content}</div> <div id='modal-js-close'><button id='modal-js-close-btn' disabled=${!this.allowclose} onclick=${this.hide}>Close</button></div></div></div>` } show() { document.getElementById('modal-js-bg').style.display = 'flex'; document.getElementById('modal-js-main').style.animation = 'showmodal 325ms ease-in'; } hide() { document.getElementById('modal-js-bg').style.display = 'none'; document.getElementById('modal-js-main').style.animation = 'hidemodal 325ms ease-out'; } } #modal-js-bg{ width: 100vw; height: 100vh; position: absolute; background-color: rgba(0,0,0,0.6); display: none; justify-content: center; align-items: center; } #modal-js-main{ background-color:white; width:50%; padding:10px; display: flex; font-size:18px; align-items: center; flex-direction:column; } #modal-js-close-btn{ background-color: #2e2eff; height:35px; width: 80px; border-radius: 7px; color: white; border: none; } @keyframes showmodal { 0%{ opacity:0; } 100%{ opacity:1; } } @keyframes hidemodal { 0%{ opacity:1; } 100%{ opacity:0; } } <html> <head> <title>modal</title> </head> <body> <script> window.onload = function () { const mymodal = new Modal('this is example') mymodal.show() } </script> </body> </html>en el árbol de documentos puedo ver que la función onclick está escrita pero todo está escrito en letras pequeñas getElementById está escrito como getelementbyid No puedo resolver esto ¿alguien puede ayudar? Gracias de antemano