Добрый день! Решил переделать данный калькулятор для расчета стоимости кровли но т.к. знания поверхностные не могу понять где допустил ошибки. Сильно не ругайте все пытался делать методом тыка.
Вроде считает общую сумму но немогу настроить вывод кол-ва листов шифера и стоимости 1 шт. в зависимости от цвета.
Подскажите, что я упустил или чего перебрал? )) И как можно сделать так чтобы подсчет выводился сразу при вводе площади, а не по клику в другой области? вывод количества листов считается S/1.336 m.
Может кому потом пригодятся подобные наработки)
<!DOCTYPE HTML>
<html>
<head>
<title>Калькулятор - расчет стоимости кровли</title>
<meta charset="utf-8">
</head>
<body>
<form id="form" name="form">
<br/>
<input type="radio" id="color1" name="cena" value="272" checked />Серый
<input type="radio" id="color2" name="cena" value="285" />Красный
<input type="radio" id="color3" name="cena" value="275" />Зеленый
<input type="radio" id="color4" name="cena" value="235" />Сланец
<br/><br/>
<b> ПЛОЩАДЬ КРОВЛИ:</b> <input id="area" type="text" value="5" /> <b>м2</b>
<br/>
<br/>
<div>Цена: <span id="cena">0</span> руб.</div>
<div>Рекомендованное количество шифера: <span id="kol">0</span> шт.</div>
<div>Сумма: <span id="result">0</span> руб.</div>
</form>
<script>
document.body.onload = function() {
function calc() {
var d = document, cena = color1 = color2 = color3 = color4 = 0;
var area = +d.getElementById("area").value,
color1 = d.getElementById("color1"),
color2 = d.getElementById("color2"),
color3 = d.getElementById("color3"),
color4 = d.getElementById("color4"),
result = d.getElementById("result"),
kol = d.getElementById("kol");
if (area > 90000) {alert('Вы уверены в правильности введенных данных? Введите другое значение')
};
if (area < 2) {alert('Площадь слишком мала!')
};
var kol;
kol = Math.ceil(area/1.336);
if (color1.checked) cena = +color1.value;
if (color2.checked) cena = +color2.value;
if (color3.checked) cena = +color3.value;
if (color4.checked) cena = +color3.value;
kol.innerHTML = Math.ceil(area/1.336);
cena.innerHTML = cena;
result.innerHTML = Math.ceil(kol * cena);
};
document.form.onchange = calc;
calc();
}
</script>
</body>
</html>