Пыталась прописать переменные с value, но вышла лажа т.к ещё только вникаю в синтаксис .
Код кидаю песочницей еще так думаю будет лучше . https://codepen.io/EvaSpense/pen/xxZMRgr?editors=1111
function raschitat() {
radioV = document.getElementsByName('variant_cvet');
for (i = 0; i < radioV.length; i++) {
if (radioV[i].checked)
alert(radioV[i].value);
}
}
material = document.getElementById('material').value;
switch (material) {
case "tree":
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) + (radioV);
document.getElementById('stoimost').innerHTML = "Стоимость равна: " + stoimost + " р.";
}
.cp_item {
overflow: hidden;
float: left;
margin: 0 4px 0 0;
}
img.icon {
width: 45px;
height: 45px;
margin-top: 7px;
}
<head>
<title>Стандарт Юниор</title>
</head>
<body>
<h3>Расчет стоимости кровати</h3>
<p>Стандарт Юниор</p>
<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="1" name="variant_cvet" checked>
<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="2" 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="3" 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="4" 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="5" 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="6" 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>
</body>