Не передается html в новый класс, не могу понять почему. Вопрос по ООП javascript

Question

let test = new Popup({
  html: '<h1>тест</h1>',
  onClose: () => {},
  onCreate: () => {},
});
test.create();

Должен передаваться текст, но почему то не срабатывает. Причем, если текст разместить в самом классе, он появляется. Помогите пож. разобраться в чем может быть проблема?

class Popup {
  constructor(config) {
    this.config = {
      html: '',
      onClose: '',
      onShow: '',
    };

    // Метод приведение конфига
    this.checkConfig = function (config) {
      for (const key in config) {
        if (Object.hasOwnProperty.call(this.config, key)) {
          this.config = config[key];
        }
      }
    };

    this.create = function () {
      const mainPopup = document.createElement('div');
      mainPopup.classList.add('main-popup');

      const body = document.querySelector('body');
      body.append(mainPopup);

      const contentPopup = document.createElement('div');
      contentPopup.classList.add('content-popup');
      mainPopup.append(contentPopup);

      const conditionHtml =
        typeof this.config.html === 'string' ||
        this.config.html instanceof Popup;
      if (conditionHtml) {
        contentPopup.innerHTML = this.config.html;
      }

      // Метод должен создавать сам popup и добавлять в него this.config.html (htmlString || Node)
      // instanceof
    };

    this.close = function () {
      // Метод должен закрывать popup
      window.addEventListener('click', function (event) {
        if (event.target == mainPopup) {
          mainPopup.style.display = 'none';
        }
      });
      if (this.config.onClose && typeof this.config.onClose === 'function') {
        this.config.onClose(this);
      }
    };

    this.show = function () {
      console.log('сработал');
      // Метод должен показывать popup
      if (this.config.onShow && typeof this.config.onShow === 'function') {
        this.config.onShow(this);
      }
    };

    //  this.checkConfig(config);
    //  this.create();
  }
}

let test = new Popup({
  html: '<h1>тест</h1>',
  onClose: () => {},
  onCreate: () => {},
});
test.create();

// Компонент должен принимать в себя свободный HTML или элемент и отображать его в контактной области

// Компонент после создания должен возвращать событие создания

// Компонент после закрытия должен возвращать событие закрытия

// У компонента должен быть затемняющий фон и белая контентная область

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

@font-face {
  font-family: Roboto-Regular;
  src: url("/src/fonts/Roboto-Regular.ttf"); }

@font-face {
  font-family: Roboto-Medium;
  src: url("/src/fonts/Roboto-Medium.ttf"); }

body {
  font-family: Roboto-Regular;
  font-size: 20px; }

.main-popup {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.7); }

.content-popup {
  margin: 15% auto;
  width: 380px;
  height: 245px;
  background-color: #fff;
  -webkit-border-radius: 6px;
          border-radius: 6px;
  padding: 21px 30px;
  text-align: center;
  overflow: auto;
  z-index: 3; }

<!DOCTYPE html>
<html lang="ru">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="/src/css/index.css">
</head>

<body>







   <script src="/src/js/Popup.js"></script>
</body>

</html>

Answer 1

Ошибка тут.

Должно быть думаю

if (Object.hasOwnProperty.call(this.config, key)) {
   this.config[key] = config[key];
}

а у вас

if (Object.hasOwnProperty.call(this.config, key)) {
    this.config = config[key];
}

также раскоментировал

 this.checkConfig(config);

class Popup {
  constructor(config) {    
    this.config = {
      html: '',
      onClose: '',
      onShow: '',
    };

    // Метод приведение конфига
    this.checkConfig = function (config) {
      for (const key in config) {
        if (Object.hasOwnProperty.call(this.config, key)) {
          this.config[key] = config[key];
        }
      }
    };

    this.create = function () {
      const mainPopup = document.createElement('div');
      mainPopup.classList.add('main-popup');

      const body = document.querySelector('body');
      body.append(mainPopup);

      const contentPopup = document.createElement('div');
      contentPopup.classList.add('content-popup');
      mainPopup.append(contentPopup);

      const conditionHtml =
        typeof this.config.html === 'string' ||
        this.config.html instanceof Popup;
      if (conditionHtml) {
        contentPopup.innerHTML = this.config.html;
      }

      // Метод должен создавать сам popup и добавлять в него this.config.html (htmlString || Node)
      // instanceof
    };

    this.close = function () {
      // Метод должен закрывать popup
      window.addEventListener('click', function (event) {
        if (event.target == mainPopup) {
          mainPopup.style.display = 'none';
        }
      });
      if (this.config.onClose && typeof this.config.onClose === 'function') {
        this.config.onClose(this);
      }
    };

    this.show = function () {
      console.log('сработал');
      // Метод должен показывать popup
      if (this.config.onShow && typeof this.config.onShow === 'function') {
        this.config.onShow(this);
      }
    };

    this.checkConfig(config);
    //this.create();
  }
}

let test = new Popup({
  html: '<h1>тест</h1>',
  onClose: () => {},
  onCreate: () => {},
});
test.create();

// Компонент должен принимать в себя свободный HTML или элемент и отображать его в контактной области

// Компонент после создания должен возвращать событие создания

// Компонент после закрытия должен возвращать событие закрытия

// У компонента должен быть затемняющий фон и белая контентная область

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

@font-face {
  font-family: Roboto-Regular;
  src: url("/src/fonts/Roboto-Regular.ttf"); }

@font-face {
  font-family: Roboto-Medium;
  src: url("/src/fonts/Roboto-Medium.ttf"); }

body {
  font-family: Roboto-Regular;
  font-size: 20px; }

.main-popup {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.7); }

.content-popup {
  margin: 15% auto;
  width: 380px;
  height: 245px;
  background-color: #fff;
  -webkit-border-radius: 6px;
          border-radius: 6px;
  padding: 21px 30px;
  text-align: center;
  overflow: auto;
  z-index: 3; }

<!DOCTYPE html>
<html lang="ru">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="/src/css/index.css">
</head>

<body>







   <script src="/src/js/Popup.js"></script>
</body>

</html>

БЛОГ НА HUSL

Не передается html в новый класс, не могу понять почему. Вопрос по ООП javascript

Ответы (1 шт):