Делаю калькулятор для сайта - рассчитать стоимость натяжных потолков.
В калькуляторе 6 input (значение нахожу через value) и 1 select (значение нахожу через value) .
Калькулятор вроде работает, по клику на кнопку срабатывает сложение данных.
Но, есть одно исключение.
Те значения что находятся в input - они между собой суммируются, выдавая нужную сумму.
А вот значение select не плюсуется к этой сумме, а дописывается рядом.
Другими словами - например, у меня при расчёте должна получиться 1000 руб, а получается 900100 руб
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calcularor</title>
<link rel="stylesheet" href="1.css">
</head>
<body>
<div class="container">
<div class="calc_wrap_sub">
<div id="calc_wrap">
<form action="" id="calc">
<div class="title_calc">
<h2>Расчитать стоимость</h2>
</div>
<div class="wrapper_calc">
<div class="wrap_input">
<label for="square">Площадь</label>
<input type="text" value="0" name="square" id="square">
</div>
<div class="wrap_input">
<label for="corner">Углы</label>
<input type="text" value="0" name="corner" id="corner">
</div>
<div class="wrap_input">
<label for="pipes">Трубы</label>
<input type="text" value="0" name="pipes" id="pipes">
</div>
<div class="wrap_input">
<label for="perimeter">Периметр</label>
<input type="text" value="0" name="perimeter" id="perimeter">
</div>
<div class="wrap_input">
<label for="electrolier">Люстра</label>
<input type="text" value="0" name="electrolier" id="electrolier">
</div>
<div class="wrap_input">
<label for="spot_light">Точечный свет</label>
<input type="text" value="0" name="spot_light" id="spot_light">
</div>
<div class="wrap_input">
<label for="material">Материал</label>
<select name="material" id="material">
<option selected="selected">Выберите материал</option>
<optgroup label="Китай (MSD Premium)">
<option value="100">ПВХ,Матовый Белый (1,5-3,2м)</option>
<option value="200">ПВХ,Матовый Белый (большая ширина) (3,6-5,0м)</option>
<option value="300">ПВХ,Матовый Цветной (1,5-3,2м)</option>
<option value="400">ПВХ,Глянцевый Белый (1,5-5,0м)</option>
<option value="430">ПВХ,Глянцевый Цветной (1,5-5,0м)</option>
<option value="450">Сатин,Белый (большая ширина) (3,6-5,0м)</option>
<option value="435">Сатин,Белый (1,5-3,2м)</option>
<option value="390">Сатин,Цветной (1,5-3,2м)</option>
<option value="470">Галактика,Глянцевый Цветной (3,2-3,2м)</option>
</optgroup>
<optgroup label="Германия (Pongs и Descor)">
<option value="410">ПВХ,Матовый Белый (1,3-3,25м)</option>
<option value="500">ПВХ,Матовый Цветной (1,3-2,7м)</option>
<option value="700">ПВХ,Глянцевый Белый (1,3-3,25м)</option>
<option value="505">ПВХ,Глянцевый Цветной (1,3-2,7м)</option>
<option value="860">Ткань,Матовый Белый (3,1-5,1м)</option>
<option value="1500">Ткань,Матовый Descor Star 5,1м</option>
<option value="1300">Ткань,Матовый Цветной 5,1м</option>
<option value="2400">Сатин, Белый (1,3-3,25м)</option>
<option value="2500">Сатин, Цветной (1,3-2,7м)</option>
</optgroup>
<optgroup label="Бельгия (Polyplast)">
<option value="2250">ПВХ,Матовый Белый (1,5-3,2м)</option>
<option value="2400">ПВХ,Матовый Белый (большая ширина) (3,4-5,0м)</option>
<option value="450">ПВХ,Матовый Цветной (1,5-5,0м)</option>
<option value="380">ПВХ,Глянцевый Белый (1,5-3,2м)</option>
<option value="420">ПВХ,Глянцевый Белый (большая ширина) (3,4-5,0м)</option>
<option value="450">ПВХ,Глянцевый Цветной (1,5-5,0м)</option>
<option value="370">Сатин,Белый (1,5-3,2м)</option>
<option value="450">Сатин,Цветной (3,4-5,0м)</option>
<option value="3700">Галактика,Глянцевый Цветной (3,2-3,2м)</option>
</optgroup>
</select>
</div>
</div>
<div class="btn_price" onclick="calculate()">Рассчитать</div>
<div class="summa" id="summa"></div>
</form>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
function calculate() {
var selectSquare = document.getElementById('square').value*200;
var selectCorner = document.getElementById('corner').value*50;
var selectPipes = document.getElementById('pipes').value*150;
var selectPerimeter = document.getElementById('perimeter').value*50;
var selectElectrolier = document.getElementById('electrolier').value*100;
var selectSpotLight = document.getElementById('spot_light').value*200;
var selectMaterial = document.querySelector('#material').value;
var raschet = selectSquare + selectCorner + selectPerimeter +
selectPipes + selectElectrolier + selectSpotLight + selectMaterial;
document.getElementById('summa').innerText = raschet +" р.";
return true;
}
