addEventListener для элементов, созданных из функции конструктора

Question

Функция-конструктор. Создает кнопку с определенным цветом кнопки. Дожна иметь функцию, при которой, нажимая на определенную кнопку цвет фона страницы становится таким же. Не могу понять, как сделать так, чтобы функция работала. Куда и как повесить addEventListener?

let body = document.querySelector("body");

function Button(width, height, color) {
  let button = document.createElement("button");
  body.append(button);
  this.width = width;
  this.heigth = height;
  this.color = color;

  this.create = function () {
    button.style.width = this.width;
    button.style.height = this.width;
    button.textContent = "Click Me!";
    button.style.color = this.color;
  };

  this.changeBackground = function () {
    return function () {
      body.style.backgroundColor = this.color;
    };
  };
}

let button1 = new Button("5rem", "5rem", "green");
button1.create();
button1.addEventListener("click", () => button1.changeBackground());

let button3 = new Button("5rem", "5rem", "red");
button3.create();

let button2 = new Button("5rem", "5rem", "blue");
button2.create();

Answer 1

const body = document.body;

class Button
{
    constructor(width, height, color)
    {
        this.width  = width;
        this.height = height;
        this.color  = color;
    }

    create()
    {
        this.element = document.createElement("button");

        this.element.width  = this.width;
        this.element.height = this.height;
        this.element.color  = this.color;

        this.element.textContent = 'Click me!';

        body.append(this.element);
    }

    changeBackground()
    {
        body.style.backgroundColor = this.color;
    }
}

let button1 = new Button("5rem", "5rem", "green");
button1.create();
button1.element.addEventListener("click", () => button1.changeBackground());

let button2 = new Button("5rem", "5rem", "red");
button2.create();
button2.element.addEventListener("click", () => button2.changeBackground());

let button3 = new Button("5rem", "5rem", "blue");
button3.create();
button3.element.addEventListener("click", () => button3.changeBackground());

или же добавить классу метод addEventListener:

const body = document.body;

class Button
{
    constructor(width, height, color)
    {
        this.width  = width;
        this.height = height;
        this.color  = color;
    }

    create()
    {
        this.element = document.createElement("button");

        this.element.width  = this.width;
        this.element.height = this.height;
        this.element.color  = this.color;

        this.element.textContent = 'Click me!';

        body.append(this.element);
    }

    changeBackground()
    {
        body.style.backgroundColor = this.color;
    }

    addEventListener(type, listener, options)
    {
        this.element.addEventListener(type, listener, options);
    }
}


let button1 = new Button("5rem", "5rem", "green");
button1.create();
button1.addEventListener("click", () => button1.changeBackground());

let button2 = new Button("5rem", "5rem", "red");
button2.create();
button2.addEventListener("click", () => button2.changeBackground());

let button3 = new Button("5rem", "5rem", "blue");
button3.create();
button3.addEventListener("click", () => button3.changeBackground());

БЛОГ НА HUSL

addEventListener для элементов, созданных из функции конструктора

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