Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.06.2019, 03:03
Аспирант
Отправить личное сообщение для Иса Мирзоев Посмотреть профиль Найти все сообщения от Иса Мирзоев
 
Регистрация: 15.04.2019
Сообщений: 72

Странность в классах (начинающий)
Приветствую. Изучаю классы. Почему-то не могу создать более 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.

Одна константа на странице отображается, вторая и любые прочие - нет. Подскажите, пожалуйста, что я делаю не так? Спасибо заранее.
Ответить с цитированием
  #2 (permalink)  
Старый 22.06.2019, 03:38
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

<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>

Последний раз редактировалось Malleys, 22.06.2019 в 03:53.
Ответить с цитированием
  #3 (permalink)  
Старый 22.06.2019, 15:19
Аспирант
Отправить личное сообщение для Иса Мирзоев Посмотреть профиль Найти все сообщения от Иса Мирзоев
 
Регистрация: 15.04.2019
Сообщений: 72

Спасибо, изучу))
Ответить с цитированием
  #4 (permalink)  
Старый 22.06.2019, 15:20
Аспирант
Отправить личное сообщение для Иса Мирзоев Посмотреть профиль Найти все сообщения от Иса Мирзоев
 
Регистрация: 15.04.2019
Сообщений: 72

Сообщение от Malleys Посмотреть сообщение
<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>
а в чем у меня все-таки проблема была? Чтобы понять механизм)
Ответить с цитированием
  #5 (permalink)  
Старый 22.06.2019, 16:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Иса Мирзоев
а в чем у меня все-таки проблема была?
вы не создавали элемент, а искали!!!
Сообщение от Иса Мирзоев
this.$el = document.querySelector(tagName)
взгляните на эту строку в примерах Malleys,
Сообщение от Malleys
this.element = document.createElement(tagName);

и не надо копировать сообщения целиком
Ответить с цитированием
  #6 (permalink)  
Старый 24.06.2019, 01:03
Аспирант
Отправить личное сообщение для Иса Мирзоев Посмотреть профиль Найти все сообщения от Иса Мирзоев
 
Регистрация: 15.04.2019
Сообщений: 72

Сообщение от рони Посмотреть сообщение
вы не создавали элемент, а искали!!!

взгляните на эту строку в примерах Malleys,



и не надо копировать сообщения целиком
Спасибо, дошло))
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
this в классах prog_f130 Node.JS 3 19.02.2018 16:57
Странность небольшая.. V2oD2o jQuery 3 20.05.2016 11:56
Начинающий Front-End разработчик ищет наставника\работу\единомыш ленников Danny14 Оффтопик 4 30.04.2016 05:52
странность с document.all __romka_ AJAX и COMET 2 05.03.2011 13:45
Объясните я начинающий! karakym Общие вопросы Javascript 7 27.11.2010 23:27