Выполнение скрипта при изменении значения

Question

Есть функция:

window.onload =function() {
let counter = document.querySelector('.t706__carticon-counter');
if(counter.innerText > 0){
$('.basket').css('opacity' , '1');
} else { 
$('.basket').css('opacity' , '0.5');
}
}

Она считает кол-во товара в корзине, то есть если кол-во товара больше нуля, прозрачность контейнера корзины становится "1", если же товара нет в корзине, то есть равно нулю, то корзина приобретает прозрачность "0.5".

Этот скрипт выполняется только при загрузке страницы или выполнении какого либо действия (нажатие на кнопку, например).

Как выполнять скрипт при любом изменении кол-ва товара, а если весь товар удален то контейнер корзины делаем полупрозрачным?

Answer 1

window.onload =function() {
    let counter = document.querySelector('.t706__carticon-counter');
    if(+counter.innerText > 0){
        $('.basket').css('opacity' , '1');
    } else {
        $('.basket').css('opacity' , '0.5');
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="t706__carticon-counter">0</div>
<div class="basket">Пурум Пум Пум</div>

Вы прям никак не хотите следовать советам и завязать изменение на кнопку добавления товара в корзину или на кнопку удаления товара из корзины.

Я ещё раз напомню Вам, что я не рекомендую использовать постоянную проверку поля на наличие и количество товара в ней.

Но, если у Вас нет другого варианта, то можно сделать так.
Для демонстрации добавил кнопку добавить и удалить товар.
И специально не привязывал изменение opacity на кнопки, ввиду описанного выше.

    window.onload =function() {
        let counter = document.querySelector('.t706__carticon-counter');
        but.onclick = function () {
            counter.innerText = +counter.innerText + 1;
        };
        but1.onclick = function () {
            counter.innerText = +counter.innerText - 1;
        };
        function checkOpacity() {
            if(+counter.innerText > 0){ // Проверяем количество
                $('.basket').css('opacity' , '1'); // Если больше то ставим opacity 1
            } else {
                $('.basket').css('opacity' , '0.5'); // Если 0 или меньше, то opacity 0.5
            }
        }
        setInterval(checkOpacity, 500); 
        };

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="t706__carticon-counter"></div>
<div class="basket">Пурум Пум Пум</div>

<button id="but">Добавить элемент в карзину</button>
<button id="but1">Удалить элемент из корзины</button>

БЛОГ НА HUSL

Выполнение скрипта при изменении значения

Ответы (1 шт):