@crius_bogdan

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

Есть уже готовый калькулятор, все работает как надо но. И в нем есть такая фича чир при нажатии на плюсик появляется еще один селект, его я добавиляю с помощью .append() (jquery); Также есть кнопка которая его убирает, и вот проблема что когда селект убирается и из суммы должно убираться его значегие. А этого не происходит.

P.S. ( я уже больше недели сижу с этим калькулятором поэтому умогу чего то не видеть, буду также рад вашим советам).

Исходный код калькулятора
и ссылка на верстку wo.art-type.ru/calc.html
let count = 4,
    doc = document,
    wrapper = doc.getElementsByClassName('calc__wrap--sel')[0],
    sum = doc.querySelector('.calc__total--num');

wrapper.addEventListener('input', function(event){
    let target = event.target,
        multiply = +doc.getElementsByClassName('input-num')[0].value,
        total = 0;
    if(target && target.tagName == 'SELECT') {
        let elem = event.srcElement,
            data = elem.getAttribute('data-id'),
            val = elem.value;
            $('#p_' + data).val(val);
            console.log(target.tagName);
            if(elem.classList.contains('new-' + (count -1))) {
                $('.calc__minus').attr('data-price', val);
                console.log(val);
                console.log(count);
            }
            $('input.total-calc, input.total-calc2').each(function(){
                let itIsMe = parseInt(+$(this).val());

                if( +multiply != 0 &&  target) {
                    console.log(multiply);
                    total += itIsMe;
                    total *= multiply;
                } else {
                    total += itIsMe;
                }
            });      
            sum.textContent = total;
    }
});
$('.calc__plus').on('click', function(){
    $('.calc__wrap--sel').append($('<div class="calc__select-wrap"><input class="calc__minus" readonly value="-"><div class="calc__select--arrow"></div><select class="select select-more"><option value="0">Выберите доп услуги</option><option value="300">Доп услуга за 300</option><option value="600">Доп услуга за 600</option><option value="1000">Доп услуга за 1000</option></select><input type="text" hidden value="0" class="total-calc2">'));
    $('.calc__minus').attr('data-id', count);
    $('.select-more').attr('data-id', count);
    $('.select-more').attr('class', 'select-more new-' + count);
    $('.total-calc2').attr('id', 'p_' + count);
    count++; 
});
$('body').on('click','.calc__minus', function(){

    $(this).parent().remove();
    
    count--;
});
  • Вопрос задан
  • 74 просмотра
Решения вопроса 1
Как я вижу, при удалении селекта не срабатывает событие "input", соответственно и не происходит пересчет.

Я бы вынес код расчета(пересчета) в отдельную функцию, и вызывал бы ее при удалении селекта и при событии "input"
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы