Как создать элемент HTML и установить его атрибуты стиля в javascript [закрыто] ⇐ Html

[Anonymous]

Различная документация указывает на то, что я могу это сделать:

Код: Выделить всё

const e = document.createElement('div');
e.style.left = '100px';
e.style.top = '100px';

и, действительно, если я ввожу это в консоль браузера по одной строке за раз, это работает.
Однако, если я помещаю этот код в функцию и запускаю функцию из консоли браузера, я получаю сообщение об ошибке, сообщающее, что e.style не определен. Добавляем строку

Код: Выделить всё

e.style = '';

сразу после того, как createElement не имеет никакого эффекта. Я пробовал это в Chrome и Firefox.
Что работает (как индивидуально, так и в виде функции):

Код: Выделить всё

const e = document.createElement('div');
e.style = 'left:100px;top:100px;';

Почему?
РЕДАКТИРОВАТЬ: приведенный выше код действительно работает нормально; Я слишком упростил это. Вот короткий HTML-файл, демонстрирующий проблему. Якобы конструкторы Box и Nox делают то же самое. Но new Box() работает, а new Nox() — нет. Возможно, это что-то глупое. Но я этого не вижу...

Код: Выделить всё

const boxes = [];

function Box(x, y, txt) {
const e = this.element = document.createElement('div');
e.className = 'box'
e.style = 'left:' + (this.x = (x || 0)) + 'px;top:' + (this.y = (y || 0)) + 'px;';
e.innerHTML = '' + txt + '
';
document.body.appendChild(e);
boxes.push(this);
}

function Nox(x, y, txt) {
const e = this.element = document.createElement('div');
e.className = 'box'
e.style.left = (this.x = (x || 0)) + 'px'; // x position of upper left
e.style.top = (this.y = (y || 0)) + 'px'; // y position of upper left
e.innerHTML = '
' + txt + '
';
document.body.appendChild(e);
boxes.push(this);
}
Box(50,100,'Box');
Nox(150,200,'Nox');

Код: Выделить всё

div.box {
position: absolute;
top: 0;
left: 0;
height: 30px;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
}

Подробнее здесь: https://stackoverflow.com/questions/798 ... javascript