addEventListener('click') 无法处理关闭模态的按钮

Question

所以我有一个在单击关闭按钮时似乎不想关闭的模式。 这就是我当前代码显示和关闭模态以及将模态背景添加到 DOM 并删除它的样子。

const $ = document;

class Selectable {

    addElement = () => {
        const html = '<div class="modal-backdrop show"></div>';
        const body = $.querySelector('body');

        body.innerHTML += html;
    };

    removeElement = elementClass => {
        let element = $.querySelector('.' + elementClass);
        element.parentNode.removeChild(element);
    };

    showModal = () => {
        const modal = $.getElementById('modal-finish');
        const body = $.querySelector('body');

        modal.classList.add('show');
        body.classList.add('modal-open');

        this.addElement();
    };

    closeModal = () => {
        const modal = $.getElementById('modal-finish');
        const body = $.querySelector('body');

        modal.classList.remove('show');
        body.classList.remove('modal-open');

        this.removeElement('modal-backdrop');
    };

    init() {
        // Look Up Button
        $.getElementById('btn-look-up').addEventListener(
            'click',
            this.showModal,
            false
        );

        // Close the Modal
        $.querySelector('.modal-close').addEventListener(
            'click',
            this.closeModal,
            false
        );
    }
}

const Selectables = new Selectable();
Selectables.init();

我有一种感觉，这是因为 clickEvent 正在立即注册或其他什么，但我不完全确定。

基本上模态打开但关闭按钮根本不起作用。

我之前只用过 jQuery 来做 JavaScript，所以我使用的是const $ = document; 以简化向标准 JavaScript 的转换。

Answer 1

试试下面的代码：试试吧

document.getElementById("myBtn").addEventListener("click", function(){ document.getElementById("demo").innerHTML = "Hello World"; });