Калькулятор на чистом JS

var price = 0, 
  models_html = ""; 
var cases = [ 
  //Type Model  Size  Weight  H * W * D  Price 
  ['ABS Пластик', 'Краби', ['S', '2', 50, 34, 20, 2190], 
    ['M', '2.7', 61, 43, 25, 2690], 
    ['L', '3.5', 71, 49, 29, 2990] 
  ], 
  ['ABS Пластик', 'Бангкок', ['S', '2,2', 53, 35, 20, 2390], 
    ['M', '2.7', 63, 41, 26, 2790], 
    ['L', '3.5', 73, 48, 31, 3090] 
  ], 
  ['ABS Пластик', 'Паттая', ['S', '2,2', 56, 35, 23, 2490], 
    ['M', '3', 66, 46, 23, 2890], 
    ['L', '3.8', 76, 54, 30, 3190] 
  ], 
  ['ABS Пластик', 'Пхукет', ['S', '2,2', 58, 38, 25, 2490], 
    ['M', '3', 68, 44, 28, 2890], 
    ['L', '3.8', 78, 51, 32, 3190] 
  ], 
 
  ['Поликарбонат', '', ['S', '2.3', 50, 34, 20, 3190], 
    ['M', '3.1', 61, 43, 25, 3690], 
    ['L', '3.8', 71, 49, 29, 4090] 
  ], 
 
  ['Полипропилен', 'Сингапур', ['S', '2.9', 57, 40, 23, 4490], 
    ['M', '3.8', 67, 45, 27, 5290], 
    ['L', '4.6', 77, 51, 32, 5990] 
  ], 
  ['Полипропилен', 'Маями', ['S', '2,2', 58, 40, 21, 5490], 
    ['M', '2.8', 63, 41, 26, 2790], 
    ['L', '3.5', 73, 48, 31, 3090] 
  ], 
  ['Полипропилен', 'Madrid', ['S', '2,2', 56, 35, 23, 2490], 
    ['M', '3', 66, 46, 23, 2890], 
    ['L', '3.8', 76, 54, 30, 3190] 
  ], 
  ['Полипропилен', 'Monaco', ['S', '2,2', 58, 38, 25, 2490], 
    ['M', '3', 68, 44, 28, 2890], 
    ['L', '3.8', 78, 51, 32, 3190] 
  ], 
  ['Полипропилен', 'Moscow', ['S', '2,2', 58, 38, 25, 2490], 
    ['M', '3', 68, 44, 28, 2890], 
    ['L', '3.8', 78, 51, 32, 3190] 
  ] 
]; 
for (var i = 0; i < cases.length; i++) { 
  if (cases[i][0] == 'ABS Пластик') { 
    models_html += "<label for='" + cases[i][1] + "'><input type='radio' name='model' class='dn' onclick='calc()' id='" + cases[i][1] + "' value='" + cases[i][1] + "'><span class='btn btn-outline-primary'>" + cases[i][1] + "</span></label>"; 
  } 
} 
document.getElementById('models').innerHTML = models_html; 
 
function calc() { 
  var type = document.querySelector('input[name="type"]:checked').value; 
  var model = document.querySelector('input[name="model"]:checked').value; 
  var size = document.querySelector('input[name="size"]:checked').value; 
  var price = 0; 
  if (type == 'abs') { 
    type = 'ABS Пластик'; 
  } else if (type == 'polyc') { 
    type = 'Поликарбонат'; 
  } else { 
    type = 'Полипропилен'; 
  } 
 
  for (var i = 0; i < cases.length; i++) { 
    if (cases[i][0] == type && cases[i][1] == model) { 
      var index = i; 
    } 
  } 
  if (size == cases[i][2][0]) { 
    price = cases[i][2][5]; 
  } 
  document.getElementById('price').innerHTML = price; 
}

<FORM class="catalog" id='catalog'> 
  <div id="types"> 
    <label for="abs"> 
			<input type="radio" name="type" onclick="calc()" value="abs" id="abs" class="dn"> 
			<span class="btn btn-outline-primary">ABS пластик</span> 
		</label> 
    <label for="polyc"> 
			<input type="radio" name="type" onclick="calc()" value="polyc" id="polyc" class="dn"> 
			<span class="btn btn-outline-primary">Поликарбонат</span> 
		</label> 
    <label for="polyp"> 
			<input type="radio" name="type" onclick="calc()" value="polyp" id="polyp" class="dn"> 
			<span class="btn btn-outline-primary">Полипропилен</span> 
		</label> 
  </div> 
  <div id="sizes"> 
    <label for="s"> 
			<input type="radio" name="size" onclick="calc()" value="S" id="s" class="dn"> 
			<span class="btn btn-outline-primary">S</span> 
		</label> 
    <label for="m"> 
			<input type="radio" name="size" onclick="calc()" value="M" id="m" class="dn"> 
			<span class="btn btn-outline-primary">M</span> 
		</label> 
    <label for="l"> 
			<input type="radio" name="size" onclick="calc()" value="L" id="l" class="dn"> 
			<span class="btn btn-outline-primary">L</span> 
		</label> 
  </div> 
  <div id="colors"> 
 
  </div> 
  <span class="btn btn-primary">Заказать</span> 
  <div id="price"> 
 
  </div> 
</FORM>