ZMA,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var options = [
{
value: 1,
text: 'красный'
},
{
value: 1.2,
text: 'зеленый'
},
{
value: 2.5,
text: 'синий'
}
];
function createOption(obj) {
return new Option(obj.text, obj.value)
}
function createSelect(obj) {
var select = document.createElement("select");
select.id = "mySelect";
obj.forEach(function(option) {
select.appendChild(createOption(option))
});
return form.insertBefore(select, output)
}
function calculate() {
var h = +height.value || 0,
w = +width.value || 0,
c = +select.value;
h < 0 && (h = 0);
w < 0 && (w = 0);
h = h * w;
h <= .4 && (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 = createSelect(options);
form.addEventListener("input", calculate);
form.addEventListener("change", calculate);
});
</script>
</head>
<body>
<form action="" id="form" >
<input type="text" id="height">
<input type="text" id="width">
<p id="output"></p>
</form>
</body>
</html>