Форум

c4udok · #1 (**permalink**) 17.12.2021, 20:20

НЕ работает калькулятор не знаю в чем дело.
В калькуляторе есть ползунок и input radio
Значения выводится в зависимости от ползунка(значение из массива). Но значения массива должны меняться в зависимости от выбранного input radio.
Вот мой код

<form id="sliderData">
  <input id="slider1" type="range" min="0" max="5" value="0">
  <br>
   <input type="radio" name="h" checked="checked" value="0"> 
   <input type="radio" name="h" value="1"> 
</form>
<span>2</span>

var values1 = [2, 30, 20, 30, 35, 45];
var values2 = [4, 60, 40, 60, 75, 75];
$('#slider1').change(function() {
  $('span').text(values1[this.value]);
});
$("input[type='radio']").change(function(){

switch($(this).val()) {
 case "1" :
     $('span').text(values1[this.value]); 
     break;
  case "2" :     $('span').text(values2[this.value]);
    break;
  };
});

voraa · #2 (**permalink**) 17.12.2021, 21:20

В input ratio value 0 и 1
А в switch case 1и 2

ksa · #3 (**permalink**) 17.12.2021, 21:33

c4udok, малость изменить...

<!DOCTYPE html>
<html>
<head>
<script src='https://code.jquery.com/jquery-latest.min.js'></script>
<!--
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
<script src='tmp.js'></script>
-->
<style>
</style>
<script>
</script>
</head>
<body>
<form id="sliderData">
	<input id="slider1" type="range" min="0" max="5" value="0">
	<br>
	<input type="radio" name="h" checked="checked" value="0"> 
	<input type="radio" name="h" value="1"> 
</form>
<span>2</span>
<script>
const obj = {
	0: [2, 30, 20, 30, 35, 45],
	1: [4, 60, 40, 60, 75, 75]
}
$('#slider1').change(function() {
	const i = $("input:checked").val()
	$('span').text(obj[i][this.value]);
});
$("input[type='radio']").change(function(){
	const j = $('#slider1').val()
	$('span').text(obj[this.value][j]); 
});
</script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript