Как сделать, чтоб было менять не только 1 блоку?

Question

[ART4]

Имеется страница, где при выборе варианта товара, меняется значение веса(брутто).

Сам код имеется:

document.querySelector('select#myselect').addEventListener('change', function() {
        const f = this.querySelector(`[value="${this.value}"]`).getAttribute('for');
        document.querySelector('#mydiv').innerHTML = `Вес брутто*: ${f} kg`;
});

Но есть один косяк. На странице если имеется 2 товара, то работает только верхний товар (1 блок). А нужно чтоб все работы которые имеют вариантов товара. В данный момент на скрине (2 блок), при выборе, вес брутто не меняется.

Что не так тут?

Answer 1

[Леонид Князев]

1. На странице может быть только один элеиент с одним id. Надо переделать на классы.
2. document.querySelector - возвращает первый найденный элемент. Надо переделать на document.querySelectorAll

Comments

[ART4]

const cbox = document.querySelectorAll('.variant_select');

    for (let i = 0; i < cbox.length; i++) {
        cbox[i].addEventListener("change", function() {
            const f = this.querySelector(`[value="${this.value}"]`).getAttribute('for');
            document.querySelector('.weight_product').innerHTML = `Вес брутто*: ${f} kg`;
            
            console.log('clock');
        });
    }

Вот так переписал что то одно и то же вышло((