Radio input в калькуляторе

Question

Калькулятор расчёта стоимости проката, 2 типа маршрута и 3 слайдера. Как сделать чтобы при смене radio input в итоговой цене был мгновенный пересчёт, а не только когда меняешь значение в слайдере? Как тут: https://atvrent.ru/#rec257820182 Извиняюсь заранее за кривой код. Новичок. Слепил из разных вариантов такой вот:

var rangeSlider = function(){
  var slider = $('.range-slider'),
      range = $('.range-slider__range'),
      value = $('.range-slider__value');
    
  slider.each(function(){

    value.each(function(){
      var value = $(this).prev().attr('value');
      $(this).html(value);
    });

    range.on('input', function(){
      $(this).next(value).html(this.value);
    });
  });
};

rangeSlider();

/*================================================================== */


const totalCost = document.getElementById('razvalue'),
anInitialFee = document.getElementById('dvavalue'),
creditTerm = document.getElementById('trivalue');


const totalCostRange = document.getElementById('razrange'),
anInitialFeeRange = document.getElementById('dvarange'),
creditTermRange = document.getElementById('trirange');


const totalAmountCost = document.getElementById('itogo');


const inputsRange = document.querySelectorAll('.range-slider__range');

function selectColour(element){
    document.getElementById('itogo').innerText = element.value;
    colour = Number(element.value);
  }



const assignValue = () => {
totalCost.value = totalCostRange.value;
anInitialFee.value = anInitialFeeRange.value;
creditTerm.value = creditTermRange.value;
}

assignValue();

for(let input of inputsRange) {
input.addEventListener('input', () => {
assignValue();
calculation(totalCost.value, anInitialFee.value, creditTerm.value);
})
}



const calculation = (totalCost = 1, anInitialFee = 60, creditTerm = 0) => {
  
  let monthlyPayment;
  
  // determine the value of the selected radio button
    var selectedRadioButtonValue = $("[name='colour']:checked").val();
    
    if (selectedRadioButtonValue) {
      if (selectedRadioButtonValue === "pr") {
        wallHeightMultiplier = 3000;
      } else if (selectedRadioButtonValue === "ex") {
        wallHeightMultiplier = 4000;
      }
      
    }
 
  
  monthlyPayment = ((wallHeightMultiplier * totalCost * (anInitialFee / 60)) + ((creditTerm * 1000) * (anInitialFee / 60))) - ((((anInitialFee - 60) / 30) * 500) * totalCost);
  const monthlyPaymentArounded = Math.round(monthlyPayment);
if(monthlyPaymentArounded < 0) {
return false;
} else {
totalAmountCost.innerHTML = `${monthlyPayment}₽`;

}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div class="roat">

  
  <li><input type="radio" id="3000" name="colour" value="pr" checked>
    <label for="radio1">ПРОГУЛКА</label></li>

  
    <li><input type="radio" id="4000" name="colour" value="ex">
    <label for="radio2">ЭКСТРИМ</label></li>

  </div>


<div class="range-slider">
  <input class="range-slider__range" id="razrange" type="range" value="1" min="1" max="4">
  <span class="range-slider__value" value="1" id="razvalue">1</span>
</div>

<div class="range-slider">
  <input class="range-slider__range" id="dvarange" type="range" value="60" min="60" max="240" step="30">
  <span class="range-slider__value" value="60" id="dvavalue">60</span>
</div>

<div class="range-slider">
  <input class="range-slider__range" id="trirange" type="range" value="0" min="0" max="4">
  <span class="range-slider__value" value="0" id="trivalue">0</span>
  </div> 

<div class="final-result-item">
 
<div class="title"> ИТОГО: </div>
 <div class="value" id="itogo">3000<span> ₽</span></div>
</div>

Answer 1

Ваша задача решается довольно просто:

var rangeSlider = function() {
  var slider = $('.range-slider'),
    range = $('.range-slider__range'),
    value = $('.range-slider__value');

  slider.each(function() {

    value.each(function() {
      var value = $(this).prev().attr('value');
      $(this).html(value);
    });

    range.on('input', function() {
      $(this).next(value).html(this.value);
    });
  });
};

rangeSlider();

/*================================================================== */
const totalCost = document.getElementById('razvalue'),
  anInitialFee = document.getElementById('dvavalue'),
  creditTerm = document.getElementById('trivalue');

const totalCostRange = document.getElementById('razrange'),
  anInitialFeeRange = document.getElementById('dvarange'),
  creditTermRange = document.getElementById('trirange');

const totalAmountCost = document.getElementById('itogo');
const inputsRange = document.querySelectorAll('.range-slider__range');

function selectColour(element) {
  document.getElementById('itogo').innerText = element.value;
  colour = Number(element.value);
}

const assignValue = () => {
  totalCost.value = totalCostRange.value;
  anInitialFee.value = anInitialFeeRange.value;
  creditTerm.value = creditTermRange.value;
}

assignValue();

for (let input of inputsRange) {
  input.addEventListener('input', () => {
    assignValue();
    calculation(totalCost.value, anInitialFee.value, creditTerm.value);
  })
}

/* Добавлен обработчик radio */
$('input[name="colour"]').on('input', function() {
  assignValue();
  calculation(totalCost.value, anInitialFee.value, creditTerm.value);
});

const calculation = (totalCost = 1, anInitialFee = 60, creditTerm = 0) => {
  let monthlyPayment;
  // determine the value of the selected radio button
  var selectedRadioButtonValue = $("[name='colour']:checked").val();
  if (selectedRadioButtonValue) {
    if (selectedRadioButtonValue === "pr") {
      wallHeightMultiplier = 3000;
    } else if (selectedRadioButtonValue === "ex") {
      wallHeightMultiplier = 4000;
    }
  }

  monthlyPayment = ((wallHeightMultiplier * totalCost * (anInitialFee / 60)) + ((creditTerm * 1000) * (anInitialFee / 60))) - ((((anInitialFee - 60) / 30) * 500) * totalCost);
  const monthlyPaymentArounded = Math.round(monthlyPayment);
  if (monthlyPaymentArounded < 0) {
    return false;
  } else {
    totalAmountCost.innerHTML = `${monthlyPayment}₽`;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div class="roat">
  <li>
    <input type="radio" id="radio1" name="colour" value="pr" checked>
    <label for="radio1">ПРОГУЛКА</label>
  </li>
  <li>
    <input type="radio" id="radio2" name="colour" value="ex">
    <label for="radio2">ЭКСТРИМ</label>
  </li>
</div>
<div class="range-slider">
  <input class="range-slider__range" id="razrange" type="range" value="1" min="1" max="4">
  <span class="range-slider__value" value="1" id="razvalue">1</span>
</div>
<div class="range-slider">
  <input class="range-slider__range" id="dvarange" type="range" value="60" min="60" max="240" step="30">
  <span class="range-slider__value" value="60" id="dvavalue">60</span>
</div>
<div class="range-slider">
  <input class="range-slider__range" id="trirange" type="range" value="0" min="0" max="4">
  <span class="range-slider__value" value="0" id="trivalue">0</span>
</div>
<div class="final-result-item">
  <div class="title"> ИТОГО: </div>
  <div class="value" id="itogo">3000<span> ₽</span></div>
</div>

Но, я бы чуть сократил код, раз уж используется jQuery:

/* Функция подсчёта и вывода результата */
function calculation(totalCost = 1, anInitialFee = 60, creditTerm = 0) {
  let wallHeightMultiplier = $("[name='type']:checked").val();
  let monthlyPayment = ((wallHeightMultiplier * totalCost * (anInitialFee / 60)) + ((creditTerm * 1000) * (anInitialFee / 60))) - ((((anInitialFee - 60) / 30) * 500) * totalCost);
  if (Math.round(monthlyPayment) < 0) {
    return false;
  } else {
    $('#itogo').html(`${monthlyPayment}<span> ₽</span>`);
  }
}

/* Oбработчик radio */
$('input[name="type"]').on('input', function() {
  calculation($('#totalCostRange').val(), $('#anInitialFeeRange').val(), $('#creditTermRange').val());
});
/* Oбработчик range */
$('.range-slider__range').on('input', function() {
  $(this).next().html($(this).val());
  calculation($('#totalCostRange').val(), $('#anInitialFeeRange').val(), $('#creditTermRange').val());
}).trigger('input');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div class="roat">
  <li>
    <input type="radio" name="type" id="pr" value="3000" checked>
    <label for="pr">ПРОГУЛКА</label>
  </li>
  <li>
    <input type="radio" name="type" id="ex" value="4000">
    <label for="ex">ЭКСТРИМ</label>
  </li>
</div>
<div class="range-slider">
  <input class="range-slider__range" id="totalCostRange" type="range" value="1" min="1" max="4">
  <span class="range-slider__value" id="totalCost"></span>
</div>
<div class="range-slider">
  <input class="range-slider__range" id="anInitialFeeRange" type="range" value="60" min="60" max="240" step="30">
  <span class="range-slider__value" id="anInitialFee"></span>
</div>
<div class="range-slider">
  <input class="range-slider__range" id="creditTermRange" type="range" value="0" min="0" max="4">
  <span class="range-slider__value" id="creditTerm"></span>
</div>
<div class="final-result-item">
  <div class="title"> ИТОГО: </div>
  <div class="value" id="itogo"></div>
</div>

БЛОГ НА HUSL

Radio input в калькуляторе

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