Почему не передаются аргументы через this?

Question

[Александра]

Только учусь. Не могу понять, что пошло не так в уроке.
Через this не передаются аргументы (если их записать сразу в cssText, то код работает).

"Создать класс options:
Он должен содержать свойства: height, width, bg, fontSize, textAlign.
Он должен содержать метод, создающий новый div на странице, записывающий в него любой текст и при помощи cssText изменять свой стиль из переданных параметров.
Создать новый объект через класс.
Вызвать его метод и получить элемент на странице."

"use strict";
class Options {
         constructor(height, width, backgroundColor, fontSize, textAlign) {
             this.height = height;
             this.width = width;
             this.backgroundColor = backgroundColor;
             this.fontSize = fontSize;
             this.textAlign = textAlign;
         }
         makeNewDiv() {
            var newDiv = document.createElement('div');
            document.body.appendChild(newDiv);
            newDiv.textContent = prompt("What?", "");
            newDiv.style.cssText = 'height: this.height; \
            width: this.width; \
            background-color: this.backgroundColor; \
            font-size: this.fontSize; \
            text-align: this.textAlign';      
         }

     }
     var newOptions = new Options(100, 100, red, 44, center);
    
    console.log(newOptions.makeNewDiv);

Answer 1

[Владимир Проскурин]

Вот это вот

newDiv.style.cssText = 'height: this.height; \
            width: this.width; \
            background-color: this.backgroundColor; \
            font-size: this.fontSize; \
            text-align: this.textAlign';

на выходе будет вот этим вот

height: this.height;
width: this.width;
background-color: this.backgroundColor;
font-size: this.fontSize;
text-align: this.textAlign

Вы не передаете значения переменных (height, fontSize и.т.д.), и просто вставляете название переменной в строку. Нужно либо так

newDiv.style.cssText = `height: ${this.height}; 
            width: ${this.width}; 
            background-color: ${this.backgroundColor}; 
            font-size: ${this.fontSize}; 
            text-align: ${this.textAlign}`;

либо так

newDiv.style.cssText = 'height: ' + this.height + '; \
            width: ' + this.width + '; \
            background-color: ' + this.backgroundColor + '; \
            font-size: ' + this.fontSize + '; \
            text-align: ' + this.textAlign;

Comments

[Александра]

Спасибо, но выдаёт ту же ошибку "red is not defined".

[Владимир Проскурин]

Александра, а, ну это у вас вот тут вот

var newOptions = new Options(100, 100, red, 44, center);

red и center понимаются как переменные, а вы как я понимаю, хотели передать строки. Тогда вот так

var newOptions = new Options(100, 100, 'red', 44, 'center');

[Александра]

Владимир Проскурин, Да! Спасибо, большое.