Уважаемые коллеги , как правильно прописать radio ? Есть цвета на выбор, и они имеют value "название цвета" , а не /цены цвета/ при нажатии (которое должно подтягиваться в общую сумму). Все позиции должны складываться в итоговую стоимость по нажатию кнопки. Помогите пожалуйста ! :(( или может литература по этому есть какая годная .Очень хочу , решить данную задачу . Тк кажется что уже весь интернет перелопатила.Спасибо.
<!DOCTYPE html>
<html>
<head>
<title>Стандарт Юниор</title>
</head>
<body>
<h3>Расчет стоимости кровати</h3>
<p>Стандарт Юниор</p>
<style>
.cp_item {
overflow: hidden;
float: left;
margin: 0 4px 0 0;
}
img.icon {
width: 45px;
height: 45px;
margin-top: 7px;
}
</style>
<img src="C:\Users\Саша\Desktop\кровати калькулятор\КрСт Юн с быстросъем борт с ящ на кол прямох.jpg" width="400">
<p>Материал</p>
<div class="product-field-display">
<select id="material">
<option value="sosna">Сосна </option>
<option value="bereza">Береза </option>
<option value="dub">Дуб </option>
<option value="buk">Бук </option>
<option value="yasen">Ясень </option>
</select>
</div>
<br>
<p>Цвет</p>
<div class="cp_item">
<input type="radio" id="cvet" value="staryi nuts" name="variant_cvet">
<img class="icon"src="C:\Users\Саша\Desktop\кровати калькулятор\stariy-oreh-3_500x500.jpg" alt="Старый орех 3">
<span>Темный</span>
</div>
<div class="cp_item">
<input type="radio" id="cvet" value="grech nuts" name="variant_cvet">
<img class="icon"src="C:\Users\Саша\Desktop\кровати калькулятор\gr_oreh1_500x500 (1).jpg" alt="Грецкий орех 1">
<span>Светлый</span>
</div>
<div class="cp_item">
<input type="radio" id="cvet" value="mogano" name="variant_cvet">
<img class="icon"src="C:\Users\Саша\Desktop\кровати калькулятор\mogano-3_500x500.jpg" alt="Могано">
<span>Лак</span>
</div>
<div class="cp_item">
<input id="cvet" type="radio" value="venge" name="variant_cvet">
<img class="icon"src="C:\Users\Саша\Desktop\кровати калькулятор\venge-1_500x500.jpg" alt="Венге">
<span>Серый</span>
</div>
<div class="cp_item">
<input id="cvet" type="radio" value="mogano_one" name="variant_cvet">
<img class="icon"src="C:\Users\Саша\Desktop\кровати калькулятор\mogano-1_500x500.jpg" alt="Дерево 1">
<span>Дерево 1</span>
</div>
<div class="cp_item">
<input id="cvet" type="radio" value="mogano_three" name="variant_cvet">
<img class="icon"src="C:\Users\Саша\Desktop\кровати калькулятор\mogano-3_500x500.jpg" alt="Дерево 2">
<span>Дерево 2 </span>
</div>
<br>
<br>
<br>
<p>Кол-во ящиков</p>
<div class="product-field-box">
<select id="box">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
<br>
<p>Кол-во спальных мест</p>
<div class="product-field-place">
<select id="place">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<br>
<p>Размер кровати</p>
<div class="product-field-size">
<select id="size">
<option value="1">60x120 +300,00 руб</option>
<option value="2">70x160 +600,00 руб</option>
<option value="3">80x160 +700,00 руб</option>
<option value="4">80x190 +900,00 руб</option>
<option value="5">90x190 +1000,00 руб</option>
</select>
</div>
<br>
<p>Тип бортика</p>
<div class="product-field-bortik">
<select id="bortik">
<option value="no-bortik">нет</option>
<option value="little bortik">быстросъемный +250,00 руб</option>
<option value="big bortik">стационарный +260,00 руб</option>
</select>
</div>
<br>
<div><button onclick="raschitat();">Рассчитать стоимость</button></div>
<br>
<div id="stoimost"></div>
<script>
//ЗДЕСЬ ПРОВАЛ :(
function raschitat() {
radio = document.getElementsByName('variant_cvet');
for (let i=0; i<radio.length; i++){
if (radio[i].checked) {
alert(radio[i].value);
(variant_cvet) {
switch "staryi nuts":
cenaCvet = 1000;
break
}
}
}
material = document.getElementById('material').value;
switch (material) {
case "sosna":
cenaMaterial = 15000;
break
case "bereza":
cenaMaterial = 16000;
break
case "dub":
cenaMaterial = 17000;
break
case "buk":
cenaMaterial = 18000;
break
case "yasen":
cenaMaterial = 19000;
break
default:
cenaMaterial = 15000;
break
}
box = document.getElementById('box').value;
switch (box) {
case "1":
cenaBox = 400;
break
case "2":
cenaBox = 500;
break
case "3":
cenaBox = 600;
break
case "4":
cenaBox = 700;
break
case "5":
cenaBox = 800;
break
case "6":
cenaBox = 900;
break
default:
cenaBox = 400;
break
}
place = document.getElementById('place').value;
switch (place){
case "1":
cenaPlace = 1000;
break
case "2":
cenaPlace = 2000;
break
default:
cenaPlace =1000;
break
}
if(box == ""){
alert("Вы не указали кол-во ящиков");
} else if(place == ""){
alert("Вы не указали кол-во мест");
} else {
size = document.getElementById('size').value;
switch (size) {
case "1":
cenaSize = 300;
break
case "2":
cenaSize = 600;
break
case "3":
cenaSize = 700;
break
case "4":
cenaSize = 900;
break
case "5":
cenaSize = 1000;
break
default:
cenaSize = 300;
break
}
bortik = document.getElementById('bortik').value;
switch (bortik) {
case "no-bortik":
cenaBortik = 0;
break
case "little bortik":
cenaBortik = 250;
break
case "big bortik":
cenaBortik = 260;
break
default:
cenaBortik = 0;
break
}
stoimost = (cenaMaterial)+(cenaBox)+(cenaPlace)+(cenaSize)+(cenaBortik)+(cenaCvet) ;
document.getElementById('stoimost').innerHTML = "Стоимость равна: "+ stoimost +" р.";
}
}
</script>
</body>
</html>
