Странность в классах (начинающий)
Приветствую. Изучаю классы. Почему-то не могу создать более 1 константы для вывода данных итоговых. Ошибки в консоли нет. Мне собственно нужно, что можно было сколько угодно этих констант создать верно отображаемых.
Мой код class RootElement{ constructor(tagName = "div"){ this.$el = document.querySelector(tagName) } append(){ document.querySelector(".wrapper").insertAdjacentElement("afterbegin", this.$el) } } class Box extends RootElement{ constructor(color,size = 150,tagName){ super(tagName) this.color = color this.size = size } create(){ this.$el.style.background = this.color this.$el.style.width = this.$el.style.height = `${this.size}px` this.$el.append() return this } } const yellowBox = new Box("yellow", 150, "div").create() const greenBox = new Box("green", 100, "div").create() HTML-код содержит только минимальную разметку + класс wrapper. Одна константа на странице отображается, вторая и любые прочие - нет. Подскажите, пожалуйста, что я делаю не так? Спасибо заранее. |
<div class="wrapper"></div> <script> class RootElement { constructor(tagName = "div") { this.element = document.createElement(tagName); } append(element = document.body) { element.appendCild(this.element); } } class Box extends RootElement { constructor(color, size = 150, tagName) { super(tagName); this.color = color; this.size = size; this.create(); } create() { this.element.style.background = this.color; this.element.style.width = this.element.style.height = `${this.size}px`; this.element.append(); return this; } } const yellowBox = new Box("yellow", 150, "div"); const greenBox = new Box("green", 100, "div"); document.querySelector(".wrapper").append(yellowBox.element, greenBox.element); </script> А вообще лучше наследовать от HTMLElement UPD <div class="wrapper"></div> <script> class RootElement extends HTMLDivElement { // то, что вы хотели, уже есть в HTMLDivElement // может вы захотите здесь объявить свои методы! } class Box extends RootElement { constructor(color, size = 150) { super(); this.color = color; this.size = size; this.style.background = this.color; this.style.width = `${this.size}px`; this.style.height = `${this.size}px`; } } customElements.define("custom-box", Box, { extends: "div" }); const yellowBox = new Box("yellow", 150); const greenBox = new Box("green", 100); document.querySelector(".wrapper").append(yellowBox, greenBox); </script> |
Спасибо, изучу))
|
Цитата:
|
Цитата:
Цитата:
Цитата:
и не надо копировать сообщения целиком |
Цитата:
|
Часовой пояс GMT +3, время: 06:50. |