<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
function calculate() {
var h = +height.value || 0,
w = +width.value || 0,
c = +select.value;
h < 10 && (h = 10);
w < 20 && (w = 20);
h > 200 && (h = 200);
w > 250 && (w = 250);
height.value = h.toString();
width.value = w.toString();
h = h * w;
h <= 400 && (c *= 1.1);
h *= c;
output.innerHTML = h.toFixed(2)
}
var form = document.querySelector("#form"),
output = document.querySelector("#output"),
width = document.querySelector("#width"),
height = document.querySelector("#height"),
select = document.querySelector("#mySelect");
form.addEventListener("change", calculate);
});
</script>
</head>
<body>
<form action="" id="form" >
<input type="text" id="height">
<input type="text" id="width">
<select id="mySelect">
<option value="1"/>красный</option>
<option value="1.2"/>зеленый</option>
<option value="2.5"/>синий</option>
</select>
<p id="output"></p>
</form>
</body>
</html>