Калькулятор скидки на js, как его заставить работать?

Question

[Сергей]

Проблема в коде, грыз долго, но что-то не получается, в данном коде:

<form id="year">
    <input type="radio" id="radio-1" name="group" value="1"/>
    <input type="radio" id="radio-2" name="group" value="2"/>
    <input type="radio" id="radio-3" name="group" value="3"/>
	
	<div class="company">
		<select name="company" id="company">
			<option value="1500">1</option>
			<option value="5300">до 5</option>
			<option value="10100">до 10</option>
			<option value="12000">до 25</option>
			<option value="17000">до 50</option>
			<option value="0">50+</option>
		</select>
	</div><br>
	<input type="label" id="mult" name="789" maxlength="300" readonly><br>
	<input type="label" id="itog" name="789" maxlength="300" readonly>
</form>

(function ($, undefined) {
    var year = $("#year");
    var company = document.getElementById('company').value;
    var itog = document.getElementById('mult').value;
    var mult = document.getElementById('itog').value;
 
    // Подписываемся на клик по форме и делегируем событие на элемент радио внутри формы с id radio-1
    year.on("click", "#radio-3", function (event) {
        mult = company*year;        
        itog = mult-(mult*0.2);
     //   alert (itog);
    });
    year.on("click", "#radio-2", function (event) {
        mult = company*year;        
        itog = mult-(mult*0.15);
     //   alert (itog);
    });
    year.on("click", "#radio-1", function (event) {
        itog = company;
     //   alert (itog);
    });
    alert (mult);
    mult.value = mult;
    itog.value = itog;
})(jQuery);

в итоге должно получиться следующее:
1. с помощью селекта выбираем число компаний
2. выбираем число лет
3 на выходе получаем на mult - умножение первого на второе, на itog-е от mult-а скидку 15 и 20% при выборе 2 и 3 года.
Увы js не мое, и изучать пытался и готовые варианты заставить как-то работать, но увы не выходит каменный цветок.

Comments

[Алексей]

Да тут вообще все перепутано - переменные mult и itog ссылаются на противоположные элементы, далее ты получаешь сразу их значения, а в конце пытаешься работать с ними как с объектами. Ну и в ответе Дмитрий тебе еще один косяк указали

[Сергей]

Плохой я увы программист, и время крайне ограничено, а сайт обновлять надо. Последняя версия jsfiddle.net/sergyo007/BrRjb/118 вижу что мелочь осталась, но увы познаний недостаточно.

Answer 1

[Дмитрий]

year у вас и элемент и значение, вы умножаете на элемент, поэтому каменный цветок и застрял.

Comments

[Павел Корнилов]

Поясню, как для человека, далёкого от JS

var year = $("#year");
var year_v = +year.val();
    var company = document.getElementById('company').value;
    var itog = document.getElementById('mult').value;
    var mult = document.getElementById('itog').value;

И далее в коде везде, где используется умножение на year - менять переменную на year_v,

[Сергей]

Павел Корнилов, что-то не получается, jsfiddle.net/sergyo007/BrRjb/63/, а вместо year_v я изначально использовал множитель 3 и 2, были те же грабли.

[Павел Корнилов]

Сергей, вижу 404 по ссылке.

[Сергей]

Павел Корнилов, запятая откуда-то незаметно в конце прилетела jsfiddle.net/sergyo007/BrRjb/63

[Павел Корнилов]

https://codepen.io/KorniloFF/pen/bOqaRy?editors=1010

[Сергей]

Павел Корнилов, что-то с математикой происходит совсем не то, должно быть 1500*1 =1500 - 1 год, 1500*2=3000 и 2550 для 2-лет, ну и на 3 года 4500 и 3600, id="mult" планируется в дальнейшем зачеркивать красным. Ну и не совсем пойму для чего поле year_, его можно удалить заменив на 1, 2, 3

(function ($) {
var year = $("#year");
//var year_v = +$("#year_").val();
    var company = +$('#company').val();
    var mult = +$('#mult').val();
    var itog = +$('#itog').val();
 
    // Подписываемся на клик по форме и делегируем событие на элемент радио внутри формы с id radio-1
    year.on("click", "#radio-3", function (event) {
        mult = company*3;        
        itog = mult*.8;
     // alert (itog);
    });
    year.on("click", "#radio-2", function (event) {
        mult = company*2;        
        itog = mult*.85;
     //   alert (itog);
    });
    year.on("click", "#radio-1", function (event) {
        itog = company;
     //   alert (itog);
    });
     alert (mult);
    mult.value = mult;
    itog.value = itog;
})(jQuery);

jsfiddle.net/sergyo007/BrRjb/74
В итоге должно получиться примерно такое https://declaration.online/#prices с select-ом вместо ползунка.

[Павел Корнилов]

Сергей, константу year_v я ввел только для примера, заменив ей несуществующее значение year в вашем коде.
Матеематику можно подтянуть сюда абсолютно любую, главное, что при клике на разных радиокнопках будут срабатывать разные обработчики, что и требовалось по условию вопроса.
А какая будет логика этих обработчиков - зависит только от вашей фантазии ))

Answer 2

[vasiiil]

Вам это нужно?

$(document).on('click', '.radio', function() {
	var itog = $('#itog'),
      mult = $('#mult'),
      $this = $(this),
      multiplier = $('#company').find(':selected').val() * $this.data('year');
      
  mult.val(multiplier);
  itog.val(multiplier * (1 - $this.data('mult')));
});

<form id="year">
    <input class="radio" type="radio" id="radio-1" name="group" data-year="1" data-mult="0"/>
    <input class="radio" type="radio" id="radio-2" name="group" data-year="2" data-mult="0.15"/>
    <input class="radio" type="radio" id="radio-3" name="group" data-year="3" data-mult="0.2"/>

				<div class="company">
					<select name="company" id="company">
						<option value="1500">1</option>
						<option value="5300">до 5</option>
						<option value="10100">до 10</option>
						<option value="12000">до 25</option>
						<option value="17000">до 50</option>
						<option value="0">50+</option>
					</select>
</div><br>
<input type="label" id="mult" name="789" maxlength="300" readonly><br>
<input type="label" id="itog" name="789" maxlength="300" readonly>
</form>

Comments

[Сергей]

Благодарю за вариант, но вопрос уже решен, решение здесь www.cyberforum.ru/javascript-jquery/thread2379129....