Не получается прочитать свойство
Проблема в функции newModalWindow.
class ModalWindow {
constructor({
title,
descr,
exit,
htmlContent
}) {
this.title = title;
this.descr = descr;
this.exit = exit;
this.htmlContent = htmlContent;
}
create() {
const modal = document.createElement('div'),
title = document.createElement('h3'),
descr = document.createElement('div'),
exit = document.createElement('button'),
content = document.createElement('div');
modal.classList.add('modal-window');
modal.id = 'modalWindow'
title.classList.add('title');
descr.classList.add('descr');
exit.classList.add('exit-btn');
exit.id = 'exitModal';
content.classList.add('content');
title.textContent = this.title.trim();
descr.textContent = this.descr.trim();
content.textContent = this.htmlContent.trim();
modal.appendChild(title);
modal.appendChild(descr);
modal.appendChild(exit);
modal.appendChild(content);
document.body.appendChild(modal);
}
close() {
const modal = document.querySelector('#modalWindow');
modal.remove();
}
}
const settings = {
title: 'a',
descr: 'ad',
exit: 'ad',
htmlContent: 'ada'
}
function newModalWindow(settings) {
const modalWindow = new ModalWindow(settings);
const btn = document.querySelector('#button');
let exit;
btn.addEventListener('click', () => {
modalWindow.create();
exit = document.querySelector('#exitModal');
}, {
capture: true
});
exit.addEventListener('click', () => {
modal.close();
}, {
capture: true
});
}
newModalWindow(settings);
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
position: relative;
}
.modal-window {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 3px solid rgb(27, 27, 27);
border-radius: 12px;
padding: 15px 30px;
min-height: 500px;
min-width: 500px;
text-align: center;
}
.modal-window .exit-btn {
position: absolute;
right: 5px;
top: 5px;
padding: 5px;
cursor: pointer;
}
<button id="button"><img src="img/icon.svg" alt="фильтр"></button>