Как сделать так, чтобы переменная total работала вне функции? При суммировании результат переменной невидно. Как сделать переменную глобальной?
$(document).ready(function() {
var $cbs = $('.calc__check');
function calcUsage() {
var total = 0;
$cbs.each(function(){
if ($(this).is(":checked")) {
total = parseFloat(total) + parseFloat($(this).val());
}
});
console.log(total);
}
$cbs.click(function(){
calcUsage();
});
calcUsage();
$("input[name=send]").click( function () { // Событие нажатия на кнопку "Расчёт"
var action = $("select[name=action]").val(); // Получаем значение действия, которое нужно выполнить
var num = $("input[name=num]").val() * 1; // Переменная первого числа
var size = $("input[name=size]").val() * 1; // Переменная второго числа
var result; // Переменная результата
if (action == 'Значки') {
if (num >= 100 && num <= 130) {
result = num * (180 + total + size);
}
else if (num >= 131 && num <= 150) {
result = num * (180*0.9 + total + size*0.9);
}
}
else if (action == 'Спортивные медали'){
result = num * (300 + size);
}
$("input[name=result]").val(result); // записываем результат
});
});
.calc {
background: #ccc;
padding: 15px;
}
.calc__item {
display: flex;
flex-direction: column;
}
.calc__label {
display: flex;
flex-direction: row;
align-items: center;
padding-left: 10px;
}
.calc__input {
display: flex;
flex-direction: column;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="calc">
<h2 class="block__title">
КАЛЬКУЛЯТОР СТОИМОСТИ
</h2>
<div class="container">
<form id="calc">
<div class="row">
<div class="col-lg-6 calc__item">
<label class="calc__subtitle">Что изготавливаем?</label>
<select name="action">
<option>Значки</option>
<option>Спортивные медали</option>
</select>
<label>Особенности</label>
<p>Могут повлиять на конечную цену</p>
<label class="calc__label">
<input type="checkbox" class="calc__check" value="11"> Более 3х цветов эмали
</label>
<label class="calc__label">
<input type="checkbox" class="calc__check" value="11"> 3D элементы
</label>
<label class="calc__label">
<input type="checkbox" class="calc__check" value="21"> Двухсоставное изделие
</label>
<label class="calc__label">
<input type="checkbox" class="calc__check" value="11"> Трехсоставное изделие
</label>
</div>
<div class="col-lg-6">
<label class="calc__text">Количество
<input class="calc__input" type="text" name="num" placeholder="Введите количество" />
</label>
<label class="calc__input">Размер
<input class="calc__text" type="text" name="size" placeholder="Введите размер" />
</label>
<input type="button" name="send" value="Расcчитать" />
</div>
</div>
<div class="row">
<div class="col-lg-12">
<label>Итого:</label><input type="text" name="result" placeholder="Ответ" />
<div id="pay_price"></div>
</div>
</div>
</form>
</div>
</div>