Калькулятор на JS выдаёт NaN. Всего три действия

128

26 сентября 2019, 07:00

Совсем нет опыта JS. Делаю супер простой калькулятор. 2 чекбокса у которых прописана стоимость. У одного чекбокса есть инпут с числом на которое результат этого чекбокса умножается. И в итог должна попасть просто сумма общая.

Если по отдельности, отмечаю чекбоксы, то всё работает. Если вместе то NaN.

    var rozetka = 0; 
    var rozetkaCell = 0; 
    var check = 0; 
 
 
 
    $('.input__check').on('change', function () { 
        check = 0; 
        $('input:checkbox:checked').each(function () { 
            if ($(this).prop("checked")) { 
                check = Number(check) + Number($(this).data('check')); 
                 
            } 
        }); 
        summ(); 
         
    }); 
 
    $('.rozetka').on('change', function () { 
        rozetka = 0; 
        $('input:checkbox:checked').each(function () { 
            if ($(this).prop("checked")) { 
                rozetka = Number(rozetka) + Number($(this).data('rozetka')); 
            } 
        }); 
        summ(); 
         
    }); 
     
        $(".rozetka-cell").change(function () { 
        rozetkaCell = $('.rozetka-cell').val(); 
        summ(); 
        
    }); 
 
 
 
    function summ() { 
         
         
      
        rozetka = Number(rozetka); 
        rozetkaCell = Number(rozetkaCell); 
        check = Number(check); 
        main = rozetka * rozetkaCell; 
 
        $("#itogo").text(check + main + ' руб.'); 
         
         
    };

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> 
<form action=""> 
           
 
                <input class="rozetka" type="checkbox" name="rozetka" id="" data-rozetka="50" value="1"><span>Установка розеток</span> 
                <input class="rozetka-cell" type="number" min="0" name="rozetka-cell" id="" value=""><br> 
                <input class="input__check" type="checkbox" name="lystra" id="" data-check="200"><span>Установка люстры</span> 
 
</form> 
            <p>Итого: <strong><span id="itogo"></span></strong></p><br>

Answer 1

Ошибка здесь:

$('input:checkbox:checked').each(function () {

Вы почему-то идете по всем чекбоксам, но не у всех них есть атрибут data-check. Цикл надо убрать, а две строчки внутри цикла - оставить.

$('form input').on('change input', function() { 
  summ(); 
}); 
 
function summ() { 
  var outlets = 0; 
  var outletCount = +$("[name='rozetka-cell'").val(); 
  if (isNaN(outletCount)) 
    outletCount = 0; 
  if ($("[name='rozetka']").prop("checked")) 
    outlets = +$("[name='rozetka']").data("rozetka") * outletCount; 
     
  var fixture = 0; 
  if ($("[name='lystra']").prop("checked")) 
     fixture = +$("[name='lystra']").data("check"); 
 
  $("#itogo").text(outlets + fixture + ' руб.'); 
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> 
<form action=""> 
 
  <input class="rozetka" type="checkbox" name="rozetka" id="" data-rozetka="50" value="1"><span>Установка розеток</span> 
  <input class="rozetka-cell" type="number" min="0" name="rozetka-cell" id="" value=""><br> 
  <input class="input__check" type="checkbox" name="lystra" id="" data-check="200"><span>Установка люстры</span> 
 
</form> 
<p>Итого: <strong><span id="itogo"></span></strong></p><br>