0

я делаю счетчик количества продуктов, конечное число которого находится в глобальной переменной sum. Объект товара я вывожу из бд, которые я парсю в переменную pack. Кнопки товара:

    var sum=1;

        function goodsOut(data){
                if(data!=0){
                    var pack=JSON.parse(data);
                    console.log(pack);
                    var out="";    
             out+=`<div class="val-min" data-id="${pack.id}"><i class="fas fa-minus"></i></div>`;
                     out+=`<div class="val"><span>${sum}</span></div>`;
                     out+=`<div class="val-plus" data-id="${pack.id}" ><i class="fas fa-plus"></i></div>`; 
      }
    $('.goods-out').html(out);
    $('.val-plus').on('click', plusGoods);
    $('.val-min').on('click',minusGoods);
  }

function plusGoods(){
    var id = $(this).attr('data-id');
    sum++;
    console.log(sum);
}

function minusGoods(){
    var id = $(this).attr('data-id');
    sum--;
    console.log(sum);
}

При загрузке страницы отображается значение глобальной переменной sum, которое равно 1, но при изменении количества с помощью ф-ций plusGoods и minusGoods изменения происходят только в консоле, а в переменной val так и остается единица на странице. Объясните пожалуйста, что я делаю не так и как устранить это проблему? Спасибо заранее

1 ответ 1

1

Вы обновляете лишь значение переменной, а не DOM-дерево. Можете добавить вспомогательную функцию и вызывать её после изменений, например:
const updateGoodsCount = () => document.querySelector('div.val span').textContent = window.sum;

Рабочий пример:

var sum = 1;

const updateGoodsCount = () => document.querySelector('div.val span').textContent = sum; 

function goodsOut(data) {
  if (data != 0) {
    var pack = [{id: 1}, {id: 2}];
    console.log(pack);
    var out = "";
    out += `<div class="val-min" data-id="${pack.id}"><i class="fas fa-minus"></i></div>`;
    out += `<div class="val"><span>${sum}</span></div>`;
    out += `<div class="val-plus" data-id="${pack.id}" ><i class="fas fa-plus"></i></div>`;
  }
  $('.goods-out').html(out);
  $('.val-plus').on('click', plusGoods);
  $('.val-min').on('click', minusGoods);
}

function plusGoods() {
  var id = $(this).attr('data-id');
  sum++;
  updateGoodsCount();
  console.log(sum);
}

function minusGoods() {
  var id = $(this).attr('data-id');
  sum--;
  updateGoodsCount();
  console.log(sum);
}

goodsOut(2);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="goods-out">q</div>
<div class="val-plus">+</div>
<div class="val-min">-</div>

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.