Скрипт для калькулятора
Ребят, доброго вечера. Помогите со скриптом.
Нужен скрипт для формы расчета. Форма буде содержать 4 селекта и, собственно, результат. 1. Тираж. Выбирается из списка (10, 20, 30, 40) 2. Размер пакета (15*15, 30*30, 40*45) 3. Цвет пакета. Список зависит от размера пакета (15*15 (белый, черный), 30*30(красный, белый, синий), 40*45 (белый, красный, черный).. 4. Количество цветов нанесения. Выбирается из списка (1+0, 2+0, 3+0). Результат выводится без расчета: Если 1=10 2=3(40*45) 3=2(белый) 4=2(2+0) то результат = 500руб. Если 1=20 2=2(30*30) 3=2(белый) 4=2(2+0) то результат = 800руб. и так далее. Заранее спасибо) |
<div>
<select id="tirazh"> <option disabled selected></option> <option value="1">100шт</option> <option value="2">200шт</option> <option value="3">300шт</option> <option value="4">400шт</option> <option value="5">500шт</option> <option value="6">600шт</option> <option value="7">700шт</option> <option value="8">800шт</option> <option value="9">900шт</option> <option value="10">1000шт</option> <option value="11">1500шт</option> <option value="12">2000шт</option> </select> - Тираж; <br /> <br /> <select id="razmer"> <option disabled selected></option> <option value="size1">22,5 х 34см</option> <option value="size2">30 х 40см</option> <option value="size3">36 х 45см</option> <option value="size4">38 х 50см</option> <option value="size5">45 х 50см</option> <option value="size6">60 х 50см</option> <option value="size7">70 х 50см</option> </select> - Размер пакета; <br /> <br /> <select id="cvet"> </select> - Цвет пакета; <br /> <br /> <select id="nanesenie"> <option disabled selected></option> <option value="1">1 + 0</option> <option value="2">2 + 0</option> <option value="3">3 + 0</option> <option value="4">4 + 0</option> </select> - Количество цветов нанесения; <br /> <br /> <button onclick="Start();">Рассчитать!</button> <div style="font-weight:bold" id="result"></div> </div> |
А вот формулы, увы, нет(((
|
Со скриптами только на Вы
|
Так формулы расчета не будет. Для каждого сочетания селектов свой результат:
tirazh=1 razmer=size1 cvet=1 nanesenie=1 То результат = 500руб. Соответственно, при другой комбинации селектов результат будет другим. |
Этих комбинаций будет порядка 500шт.
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<select id="tirazh">
<option selected></option>
<option value="1">100шт</option>
<option value="2">200шт</option>
<option value="3">300шт</option>
<option value="4">400шт</option>
<option value="5">500шт</option>
<option value="6">600шт</option>
<option value="7">700шт</option>
<option value="8">800шт</option>
<option value="9">900шт</option>
<option value="10">1000шт</option>
<option value="11">1500шт</option>
<option value="12">2000шт</option>
</select> - Тираж; <br /> <br />
<select id="razmer">
<option selected></option>
<option value="size1">22,5 х 34см</option>
<option value="size2">30 х 40см</option>
<option value="size3">36 х 45см</option>
<option value="size4">38 х 50см</option>
<option value="size5">45 х 50см</option>
<option value="size6">60 х 50см</option>
<option value="size7">70 х 50см</option>
</select> - Размер пакета; <br /> <br />
<select id="cvet">
</select> - Цвет пакета; <br /> <br />
<select id="nanesenie">
<option selected></option>
<option value="1">1 + 0</option>
<option value="2">2 + 0</option>
<option value="3">3 + 0</option>
<option value="4">4 + 0</option>
</select> - Количество цветов нанесения; <br /> <br />
<button>Рассчитать!</button>
<div style="font-weight:bold" id="result"></div>
</div>
<script>
var tirazh = document.querySelector("#tirazh"),
razmer = document.querySelector("#razmer"),
nanesenie = document.querySelector("#nanesenie"),
summ = 0;
document.querySelector("button").onclick=function(){
if (tirazh.value == '1' && razmer.value == 'size1' && nanesenie.value == '1') summ = 500;
else if (tirazh.value == '1' && razmer.value == 'size1' && nanesenie.value == '2') summ = 600;
else if (tirazh.value == '1' && razmer.value == 'size1' && nanesenie.value == '3') summ = 700;
//итд
document.querySelector("#result").textContent = summ;
};
</script>
</body>
</html>
|
или такая вложенность.
но лучше найти кую-то закономерность и все сильно сократится
document.querySelector("button").onclick=function(){
if (tirazh.value == '1') {
if (razmer.value == 'size1') {
if (nanesenie.value == '1') summ = 500;
else if (nanesenie.value == '2') summ = 600;
//итд
}
else if (razmer.value == 'size2') {
if (nanesenie.value == '1') summ = 700;
else if (nanesenie.value == '2') summ = 800;
//итд
}
}
else if (tirazh.value == '2') {
if (razmer.value == 'size1') {
if (nanesenie.value == '1') summ = 900;
else if (nanesenie.value == '2') summ = 1000;
//итд
}
else if (razmer.value == 'size2') {
if (nanesenie.value == '1') summ = 1100;
else if (nanesenie.value == '2') summ = 1200;
//итд
}
}
document.querySelector("#result").textContent = summ;
};
|
Еще вопрос: как в скрипте поставить значение списка "cvet" - он зависим от списка "razmer" и тоже принимает значение.
|
а подробнее?
|
| Часовой пояс GMT +3, время: 14:49. |