Как изменить значение внутри тега, используя метод класса на чистом JavaScript?

Question

[Константин П]

Здравствуйте. Подскажите пожалуйста, как изменить значение внутри тега ?
Есть класс, который отвечает за карточки товара:

class ProductItem {
    constructor(name, description, category, image, price, type) {
        this.name = name;
        this.description = description;
        this.category = category;
        this.image = image;
        this.price = price;
        this.type = type;
        this.quantity = 1;
    }

    increaseQuantity() {;
        this.quantity = this.quantity + 1;
        console.log("increase: ", this.name);
    }

    decreaseQuantity() {
        if (this.quantity > 1) {
            this.quantity = this.quantity - 1;
        }
    }

    events() {
        ROOT_RIGHT_SIDE.addEventListener("click", e => {
            if (e.target.getAttribute("data-atr") === "inBasket") {
                // вызвать ререндер корзины
            }
            if (e.target.getAttribute("data-atr") === "increase") {
                this.increaseQuantity();
                // увеличение на 1
            }
            if (e.target.getAttribute("data-atr") === "decrease") {
                // уменьшение на 1
            }
        });
    }

    getTemplate() {
        const html = `
      <div class="item-wrapper" data-name="${this.name}">
          <div class="item-wrapper__img"><img src="data${this.image}" alt="${this.category}"></div>
          <div class="item-wrapper__name">${this.name}</div>
          <div class="item-wrapper__description" data-atr="${this.type}">${this.description}</div>
          <div class="item-wrapper__price">Цена: ${this.price} руб.</div>
          <div class="item-wrapper__count">
              <span>Количество</span>
            <div class="item-count__button">
              <button class="btn-count" data-atr="decrease">
                <i class='fas fa-minus' data-atr='decrease'></i>
              </button>
              <span class="item-count__field">${this.quantity}</span>
              <button class="btn-count" data-atr="increase">
                <i class='fas fa-plus' data-atr='increase'></i>
              </button>
            </div>
            <div class="item-wrapper__inbasket">
              <button class="btn-style basket-btn-add" data-name="${this.name}" data-atr="inBasket">
                В корзину
              </button>
            </div>
          </div>
      </div>`;
        return html;
    }
}

Так же есть основной класс, в котором вызывается рендер карточек товара в определенном враппере и вешаются обработчики событий.

class App {
    constructor() {}

    async getProductsItem(productType) {
        ROOT_RIGHT_SIDE.innerHTML = "";

        const products = await request.fetchData(productType); // массив с продуктами

        const productsItem = products.map(product => {
            const { name, description, category, image, price, type } = product;
            const item = new ProductItem(
                name,
                description,
                category,
                image,
                price,
                type
            );
            return item;
        });

        let content = "";
        productsItem.forEach(element => {
            content += element.getTemplate();
            element.events(); // вешаем eventListener
        });

        ROOT_RIGHT_SIDE.insertAdjacentHTML("afterbegin", content);
    }
}

Не знаю как изменить значение в поле, которое находится внутри шаблона.

<span class="item-count__field">${this.quantity}</span>

То есть в карточке товара есть кнопка (+) на которой весит дата-атрибут increase, соответственно при клике по ней у меня вызывается метод this.increaseQuantity() который и должен изменить значение в поле.
Так же еще не могу понять(если посмотреть в метод this.increaseQuantity() у меня там есть console.log), почему по клику на кнопку(+) в консоле у меня отображается количество console.log()'ов равное количеству карточек на странице. Я ожидал, что мне покажет в консоле значение только того объекта у которого я вызывал клик по кнопе (+) :)

Comments

[Игорь Махов]

От кода getTemplate хочется плакать кровавыми слезами. Выучите React.

[Константин П]

Игорь Махов, Благодарю за ''конструктивный коммент" ) я приму его к сведению и обязательно выучу Реакт, только чуть попозже) а сейчас же мой вопрос не про реакт... Ах да, не написал. я только учусь и это просто учебный проект ;)

Answer 1

[hzzzzl]

в консоле у меня отображается количество console.log()'ов равное количеству карточек на странице. Я ожидал, что мне покажет в консоле значение только того объекта у которого я вызывал клик по кнопе

events() {
        ROOT_RIGHT_SIDE.addEventListener("click", e => { 
        ....

^ каждый раз вешается новый обработчик клика на корневой элемент, то есть в итоге столько обработчиков, сколько и кнопок..

а вопрос про ререндер сложновато без песочницы придумать, точно ли надо перерисовывать компонент вообще? может проще выцепить этот span через querySelector, и поменять textContent?

или же в конструкторе сохранять ссылку на сам div.item-wrapper, и у него по клику на кнопку замещать html содержимое по шаблону

Comments

[Константин П]

Благодарю за ответ! А как быть мне с обработчиком? как мне его правильно повесить, но только один раз?

точно ли надо перерисовывать компонент вообще?

Я только учусь и поэтому не всегда вижу правильные и красивые моменты реализации и не всегда знаю, как будет правильно)
Я думал, чтобы обратиться к тегу через querySelector и изменить текстКонтент... но я думал может как-то можно сделать другим способом)

[Павел Корнилов]

Константин П, почитайте про делегирование событий. В вашем случае - это как раз то, что нужно.

Answer 2

[geforgy]

Не знаю как изменить значение в поле, которое находится внутри шаблона.

<span class="item-count__field">${this.quantity}</span>

Нужно найти этот html элемент в дереве и записать в него нужное вам значение:

var cntfield = ROOT_RIGHT_SIDE.getElementsByClassName('item-count__field')[0];
cntfield.innerText = this.quantity.toString();

Этот код стоит внести в this.increaseQuantity().

Так же еще не могу понять(если посмотреть в метод this.increaseQuantity() у меня там есть console.log), почему по клику на кнопку(+) в консоле у меня отображается количество console.log()'ов равное количеству карточек на странице.

Вы вешаете обработчики событий на один блок - родительский для всех "карточек". Нужно вешать обработчик на определённую карточку. Так, внутри метода events() класса ProductItem стоит изменить следующий код:

// ROOT_RIGHT_SIDE.addEventListener изменить на:
var elems = ROOT_RIGHT_SIDE.querySelectorAll(".item-wrapper[data-name]");
for(i = 0; i < elems.length; i++) {
    var dv = elems[i].attributes["data-name"];
    if(dv && dv.value == this.name) {
        elems[i].addEventListener(/* Установка обработчика */);
        break;
    }
}

Этот код можно уменьшить до

ROOT_RIGHT_SIDE.getElementById(this.name).addEventListener(/* Установка обработчика */);

если устанавливать имя карточки в качестве её id.