Я вашу идею уловил. Конечно не всё мне в коде понятно, но всё же результат есть:
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
.st1 {display: inline-block;margin-top: 8px;width: 125px;text-align: right;}
.st2 {display: inline-block;}h4 {color: #c3410d;}input {width: 110px;}
input[type="radio"] {width: 25px;}
.col-sm-6 {width: 270px;display: inline-block;border: solid 1px #888;padding: 10px;margin-left: 15px;background: #eee;}
</style>
<br>
<script>
function calculate(group, values) {
var a, b;
switch(group) {
case 'rectangle': a = values[0] * values[1], b = values[2] * values[3];
return [a, b, a && b ? (a + b) * 2 : 0];
break;
case 'triangle': a = values[0] * values[1] * .5, b = (values[2] + values[3]) * values[4] * .5;
return [a, b, a && b ? (a + b) * 2 : 0];
break;
/* case 'trapezium': a = (values[0] + values[1]) * .5 * values[2], b = ;
return [a, b, a && b ? (a + b) * 2 : 0];
break;
*/
case 'pyramid': a = values[0] * values[1] * .5, b = values[0] * values[2] * .5;
return [a, b, values[1] * values[2], a && b ? (a + b) * 2 : 0];
break;
case 'kom_6st': a = (values[0] + values[1]) * .5 * values[2], b = values[3] * values[4] * .5, c = values[5] * values[6], d = values[7] * values[8], e = values[9] * values[10] * .5, f = (values[11] + values[12]) * .5 * values[13];
return [a, b, c, d, e, f, a && b && c && d && e && f ? (a + b + c + d + e + f) : 0];
}
}
$(function() {
var dim = [{unt: 'м', sqr: '²', dec: 2, mul: .001}, {unt: 'мм', sqr: '²', dec: 0, mul: 1000}],
side = $('input:text')
.on('keyup', function() {
this.value = this.value.replace(/[,\.]+/,'.').replace(/[^\d.]/,'');
var u = unit.filter(':checked').val();
//расчет площадей для всех заполненных полей
$('[data-area]').each(function() {
//группу определяет атрибут data-area
var group = $(this).data('area'),
values = $.map(side.filter('.'+group), function(e) {
var v = parseFloat(e.value);
return v || 0
}),
area = calculate(group, values);
$(this).find('.area').each(function(i, e) {
$(e).text(
area[i] ? area[i].toFixed(dim[u].dec) + ' ' + dim[u].unt + dim[u].sqr : ''
)
})
})
}),
unit = $('input:radio')
.change(function() {
var u = this.value;
$('.unit').text(dim[u].unt);
side.val(function() {
var v = parseFloat(this.value);
if(v) return v * dim[u].mul
}).trigger('keyup');
});
});
</script>
</head>
<body>
<label><input type="radio" name="unit" value="0" checked="" /> метры</label>
<label><input type="radio" name="unit" value="1" /> миллиметры</label>
<h3>Комната из 6-ти стен</h3>
<p>Две стены треугольные. Две трапеции. Два параллелограма</p>
<div class="row plos" data-area="kom_6st">
<div class="col-sm-6">
<h4>Стена 1 - трапеция</h4>
<div class="st1">Основание стены: </div>
<div class="st2"><input class="kom_6st" /> <span class="unit">м</span></div>
<div class="st1">Верх стены: </div>
<div class="st2"><input class="kom_6st" /> <span class="unit">м</span></div>
<div class="st1">Высота стены: </div>
<div class="st2"><input class="kom_6st" /> <span class="unit">м</span></div>
<h4>Стена 2 - треугольная </h4>
<div class="st1">Длина основания: </div>
<div class="st2"><input class="kom_6st" /> <span class="unit">м</span></div>
<div class="st1">Высота стены </div>
<div class="st2"><input class="kom_6st" /> <span class="unit">м</span></div>
<h4>Стена 3 - параллелограмм</h4>
<div class="st1">Основание стены: </div>
<div class="st2"><input class="kom_6st" /> <span class="unit">м</span></div>
<div class="st1">Высота стены: </div>
<div class="st2"><input class="kom_6st" /> <span class="unit">м</span></div>
</div>
<div class="col-sm-6">
<h4>Стена 4 - параллелограмм</h4>
<div class="st1">Основание стены: </div>
<div class="st2"><input class="kom_6st" /> <span class="unit">м</span></div>
<div class="st1">Высота стены: </div>
<div class="st2"><input class="kom_6st" /> <span class="unit">м</span></div>
<h4>Стена 5 - треугольная</h4>
<div class="st1">Длина основания: </div>
<div class="st2"><input class="kom_6st" /> <span class="unit">м</span></div>
<div class="st1">Высота стены: </div>
<div class="st2"><input class="kom_6st" /> <span class="unit">м</span></div>
<h4>Стена 6 - трапеция</h4>
<div class="st1">Основание стены: </div>
<div class="st2"><input class="kom_6st" /> <span class="unit">м</span></div>
<div class="st1">Верх стены: </div>
<div class="st2"><input class="kom_6st" /> <span class="unit">м</span></div>
<div class="st1">Высота стены: </div>
<div class="st2"><input class="kom_6st" /> <span class="unit">м</span></div>
</div>
<div class="col-sm-6">
<img src="http://i.piccy.info/i9/0321aebbc6513954e3122c8cbbb0f7e9/1502624643/10565/1170341/kom_6st260.jpg"><br><br><br>
Площадь 1 стены: <span class="area"></span><br>
Площадь 2 стены: <span class="area"></span><br>
Площадь 3 стены: <span class="area"></span><br>
Площадь 4 стены: <span class="area"></span><br>
Площадь 5 стены: <span class="area"></span><br>
Площадь 6 стены: <span class="area"></span><br><br>
Площадь всех стен комнаты: <span class="area"></span>
</div>
</div>
</body>
Единственное что пытался и не смог - отвязать миллиметры от результатов. При вводе размеров будь то в миллиметрах или метрах - в результате я хотел бы иметь метры квадратные (сейчас есть и мм кв.).
В целом я понял на что мне сейчас нужно обратить внимание для изучения: потренироваться со свич и понять оператор this (я его пока совсем не понимаю). Сайт читать я начал с самого введения, а там подсказка на новый учебник и история ресурса. В общем освоился в навигации и обвыкся к интерфейсу. Думаю правильно будет осваивать понемногу, а не тупо как пылесос прочесть всё как художественную книгу. Много нового сразу вредно - нужно частями чтобы что то освоить. Сдаваться я не собираюсь - ближайшие несколько месяцев прописываюсь здесь на сайте.
И ещё раз спасибо всем кто помогает, когда есть несколько решений для одной задачи, тогда намного проще усваивать материал.