Как добавить select в расчёты калькулятора стоимости
Делаю калькулятор стоимости на JS. Всё получается, но никак не хочет выводиться select в итоговую стоимость. Подскажите, как выводить option из select в итоговую стоимость
Код формы:
<?php
/*
Template Name: Онлайн калькулятор
*/
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="style.css" />
<title>Калькулятор</title>
</head>
<body>
<div class="fill"></div>
<div class="container">
<form action="#" class="form form1">
<div class="form__item">
<h2 class="heading">Тип фальшбалки</h2>
<ul class="switcher">
<li class="switcher__item">
<input
type="radio"
name="tipbalki"
id="gobraz"
class="tipbalki"
value="gobraz"
/>
<label for="gobraz">Г - образная</label>
</li>
<li class="switcher__item">
<input
type="radio"
name="tipbalki"
id="pobraz"
class="tipbalki"
value="pobraz"
checked="checked"
/>
<label for="pobraz">П - образная</label>
</li>
<li class="switcher__item">
<input
type="radio"
name="tipbalki"
id="kolonna"
class="tipbalki"
value="kolonna"
/>
<label for="kolonna">Колонна-Короб</label>
</li>
</ul>
</div>
<div class="form__item">
<h2 class="heading">Порода дерева</h2>
<ul class="switcher">
<li class="switcher__item">
<input
type="radio"
name="poroda"
id="sosna"
class="poroda"
value="sosna"
/>
<label for="sosna">Сосна</label>
</li>
<li class="switcher__item">
<input
type="radio"
name="poroda"
id="listvennica"
class="poroda"
value="listvennica"
checked="checked"
/>
<label for="listvennica">Лиственница</label>
</li>
</ul>
</div>
<div class="form__item">
<h2 class="heading">Нужно красить?</h2>
<ul class="switcher">
<li class="switcher__item">
<input
type="radio"
name="kraska"
id="da"
class="kraska"
value="da"
/>
<label for="da">Да</label>
</li>
<li class="switcher__item">
<input
type="radio"
name="kraska"
id="net"
class="kraska"
value="net"
checked="checked"
/>
<label for="net">Нет</label>
</li>
</ul>
</div>
<div class="form__item">
<h2 class="heading">Дополнительные опции</h2>
<ul class="switcher">
<li class="switcher__item">
<input
type="radio"
name="dop"
id="net2"
class="dop"
value="net2"
/>
<label for="net2">Нет</label>
</li>
<li class="switcher__item">
<input
type="radio"
name="dop"
id="brashirovka"
class="dop"
value="brashirovka"
checked="checked"
/>
<label for="brashirovka">Брашировка балок</label>
</li>
<li class="switcher__item">
<input
type="radio"
name="dop"
id="rublennye"
class="dop"
value="rublennye"
checked="checked"
/>
<label for="rublennye">Рубленные "под топор" балки</label>
</li>
</ul>
</div>
<div class="form__item">
<h2 class="heading">Выберите размер балки из списка:</h2>
<ul class="switcher">
<li class="switcher__item">
<select onchange="selspUpdate" id="type_services">
<option value="0">Выбрать</option>
<option value="711">50*50 мм</option>
<option value="897">75*75 мм</option>
<option value="1030">100*100 мм</option>
<option value="1136">120*120 мм</option>
</select>
</li>
</ul>
</div>
<div class="form__item">
<h2 class="heading">Укажите длину балки и количество балок:</h2>
<div class="slider">
<input
type="number"
placeholder="Длина, м"
name="dlina"
id="dlina"
step="1"
min="2"
max="96"
/>
<output id="volume5" for="dlina">2</output>
<input
type="number"
placeholder="Количество"
name="kolichestvo"
id="kolichestvo"
step="1"
min="2"
max="96"
/>
<output id="volume6" for="kolichestvo">2</output>
</div>
</div>
</form>
<form action="#" class="form form2">
<div class="form__item">
<h2 class="heading">Ваш заказ</h2>
<div class="order">
<span>Тип фальшбалки:</span>
<output id="order_tipbalki">—</output>
</div>
<div class="order">
<span>Порода дерева:</span>
<output id="order_poroda">—</output>
</div>
<div class="order">
<span>Нужно красить?</span>
<output id="order_kraska">—</output>
</div>
<div class="order">
<span>Дополнительные опции:</span>
<output id="order_dop">—</output>
</div>
<div class="order">
<span>Сторона 1, мм:</span>
<output id="order_storona1">—</output>
</div>
<div class="order">
<span>Сторона 2, мм:</span>
<output id="order_storona2">—</output>
</div>
<div class="order">
<span>Сторона 3, мм:</span>
<output id="order_storona3">—</output>
</div>
<div class="order">
<span>Сторона 4, мм:</span>
<output id="order_storona4">—</output>
</div>
<div class="order">
<span>Длина балки, м:</span>
<output id="order_dlina">—</output>
</div>
<div class="order">
<span>Количество балок:</span>
<output id="order_kolichestvo">—</output>
</div>
</div>
<div class="form__item">
<h2 class="heading">Итоговая стоимость</h2>
<output class="total" id="total">0</output>
</div>
</form>
</div>
<script src="app.js"></script>
</body>
</html>
Код JS:
const tipbalki = Array.from(document.querySelectorAll(".tipbalki"));
const poroda = Array.from(document.querySelectorAll(".poroda"));
const kraska = Array.from(document.querySelectorAll(".kraska"));
const dop = Array.from(document.querySelectorAll(".dop"));
const option = Array.from(document.querySelectorAll(".option"));
const dlina = document.querySelector("#dlina");
const kolichestvo = document.querySelector("#kolichestvo");
const volume5 = document.querySelector("#volume5");
const volume6 = document.querySelector("#volume6");
const total = document.querySelector("#total");
const orderTipbalki = document.querySelector("#order_tipbalki");
const orderPoroda = document.querySelector("#order_poroda");
const orderKraska = document.querySelector("#order_kraska");
const orderDop = document.querySelector("#order_dop");
const orderDlina = document.querySelector("#order_dlina");
const orderKolichestvo = document.querySelector("#order_kolichestvo");
const orderOption = document.querySelector("#order_option");
tipbalki.forEach((el) => {
el.addEventListener("click", tipbalkiUpdate);
});
poroda.forEach((el) => {
el.addEventListener("click", porodaUpdate);
});
kraska.forEach((el) => {
el.addEventListener("click", kraskaUpdate);
});
dop.forEach((el) => {
el.addEventListener("click", dopUpdate);
});
dlina.addEventListener("input", dlinaUpdate);
kolichestvo.addEventListener("input", kolichestvoUpdate);
option.forEach((el) => {
el.addEventListener("change", optionUpdate);
});
function tipbalkiUpdate(e) {
currentSet.tipbalki = e.target.id;
updatePrice();
orderUpdate();
}
function porodaUpdate(e) {
currentSet.poroda = e.target.id;
updatePrice();
orderUpdate();
}
function kraskaUpdate(e) {
currentSet.kraska = e.target.id;
updatePrice();
orderUpdate();
}
function dopUpdate(e) {
currentSet.dop = e.target.id;
updatePrice();
orderUpdate();
}
function dlinaUpdate(e) {
currentSet.dlina = dlina.value;
volume5.value = currentSet.dlina;
updatePrice();
orderUpdate();
}
function kolichestvoUpdate(e) {
currentSet.kolichestvo = kolichestvo.value;
volume6.value = currentSet.kolichestvo;
updatePrice();
orderUpdate();
}
function optionUpdate(e) {
e.stopPropagation();
if (e.target.checked) {
currentSet.option.push(e.target.id);
} else {
let index = currentSet.option.indexOf(e.target.id);
currentSet.option.splice(index, 1);
}
updatePrice();
orderUpdate();
}
function updatePrice() {
let tipbalkiPrice = currentSet.getTipbalkiPrice();
let porodaPrice = currentSet.getPorodaPrice();
let kraskaPrice = currentSet.getKraskaPrice();
let dopPrice = currentSet.getDopPrice();
let optionPrice = currentSet.getOptionPrice();
let totalPrice = currentSet.dlina * currentSet.kolichestvo + tipbalkiPrice + optionPrice + porodaPrice + kraskaPrice + dopPrice;
total.value = totalPrice;
}
function orderUpdate() {
if (currentSet.dlina < 5) {
orderDlina.value = currentSet.dlina + " часа";
} else {
orderDlina.value = currentSet.dlina + " часов";
}
if (currentSet.kolichestvo < 5) {
orderKolichestvo.value = currentSet.kolichestvo + " часа";
} else {
orderKolichestvo.value = currentSet.kolichestvo + " часов";
}
orderTipbalki.value = currentSet.getTipbalkiPrice() + " \u{20BD}/час";
orderPoroda.value = currentSet.getPorodaPrice() + " \u{20BD}/час";
orderKraska.value = currentSet.getKraskaPrice() + " \u{20BD}/час";
orderDop.value = currentSet.getDopPrice() + " \u{20BD}/час";
orderOption.value = currentSet.getOptionPrice() + " \u{20BD}";
}
const priceInfo = {
tipbalki: {
gobraz: 0,
pobraz: 0,
kolonna: 0,
},
poroda: {
sosna: 0,
listvennica: 0,
},
kraska: {
da: 1000,
net: 0,
},
dop: {
net2: 0,
brashirovka: 1000,
rublennye: 1000,
},
option: {
option1: 0,
option2: 0,
option3: 0,
option4: 0,
},
};
let currentSet = {
tipbalki: "pobraz",
poroda: "sosna",
kraska: "da",
dop: "net2",
dlina: 0,
kolichestvo: 0,
option: [],
getTipbalkiPrice() {
return priceInfo.tipbalki[this.tipbalki];
},
getPorodaPrice() {
return priceInfo.poroda[this.poroda];
},
getKraskaPrice() {
return priceInfo.kraska[this.kraska];
},
getDopPrice() {
return priceInfo.dop[this.dop];
},
getOptionPrice() {
let optionPrice = 0;
if (!this.option.length == 0) {
this.option.forEach((el) => {
optionPrice += priceInfo.option[el];
});
}
return optionPrice;
},
};
Ответы (1 шт):
Автор решения: Инквизитор
→ Ссылка
Value задаются у <option>ов, но берутся у <select>а:
<select id="type_services">
<option value="0">Выбрать</option>
<option value="711">50*50 мм</option>
<option value="897">75*75 мм</option>
<option value="1030">100*100 мм</option>
<option value="1136">120*120 мм</option>
</select>
<button onclick="console.log(document.getElementById('type_services').value)" ;>Show</button>