Nexus,
да, проблема именно в этом
<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: 80px;text-align: right;}
.st2 {display: inline-block;}h4 {color: #c3410d;}input {width: 110px;}
input[type="radio"] {width: 25px;}
.col-sm-4 {width:220px;display:inline-block;border:solid 1px #888;padding:5px;margin-left:10px;background:#eee;}
.col-sm-6 {width:250px;display:inline-block;border:solid 1px #888;padding:5px;margin-left:10px;background:#eee;}
</style>
<script>
function triangle(a, b) {
return a * b * .5
}
function trapeze(a, b, c) {
return (a + b) * c * .5
}
function calculate(g, v) {
var a, b, c, d, e, f;
switch(g) {
case 'figura': a = trapeze(v[0], v[1], v[2]), b = triangle(v[3], v[4]), c = trapeze(v[5], v[6], v[7]), d = trapeze(v[8], v[9], v[10]), e = trapeze(v[11], v[12], v[13]);
return [a, b, c, d, e, a && b && c && d && e ? (a + b + c + d + e) : 0];
break;
}
}
document.addEventListener('DOMContentLoaded', function() {
var dir,
sqr = '²',
mul = {
'01': 100,
'12': 10,
'02': 1000,
'10': .01,
'21': .1,
'20': .001
},
dim = [{
unt: ' м',
dec: 2,
mul: 1
}, {
unt: ' см',
dec: 0,
mul: .0001
}, {
unt: ' мм',
dec: 0,
mul: .000001
}],
side = [].slice.call(document.querySelectorAll('input[type="text"]'));
side.forEach(function(node) {
node.addEventListener('keyup', function() {
this.value = this.value.replace(/[,\.]+/, '.').replace(/[^\d.]/, '');
var u = unit.filter(function(node) {
return !!node.checked;
}).shift().value || '';
[].forEach.call(document.querySelectorAll('[data-area]'), function(node) {
var group = node.dataset.area,
values = side.filter(function(node) {
return node.classList.contains(group);
}).map(function(e) {
return parseFloat(e.value) || 0;
}),
area = calculate(group, values);
[].forEach.call(node.querySelectorAll('.area'), function(e, i) {
e.textContent = area[i] ? (area[i] * dim[u].mul).toFixed(2) + ' м' + sqr : '';
});
})
});
});
var unit = [].slice.call(document.querySelectorAll('input[type="radio"]'));
unit.forEach(function(node) {
node.addEventListener('change', function() {
var u = this.value,
d = dir + u;
[].forEach.call(document.querySelectorAll('.unit'), function(node) {
node.textContent = dim[u].unt;
});
side.forEach(function(node) {
var v = parseFloat(node.value);
if (v)
node.value = (v * mul[d]).toFixed(dim[u].dec);
});
side.forEach(function(node) {
node.dispatchEvent(new Event('keyup'));
});
});
node.parentElement.addEventListener('mousedown', function() {
dir = unit.filter(function(node) {
return !!node.checked;
}).shift().value || '';
});
});
});
if (document.readyState === 'complete')
document.dispatchEvent(new Event('DOMContentLoaded'));
</script>
</head>
<label><input type="radio" name="unit" value="0" checked="" />В метрах</label>
<label><input type="radio" name="unit" value="1" /> сантиметры</label>
<label><input type="radio" name="unit" value="2" /> миллиметры</label>
<h3>Площадь</h3>
<div class="row plos" data-area="figura">
<div class="col-sm-4">
<h4>Сигмент 1</h4>
<div class="st1">Сторона 1:</div>
<div class="st2"><input class="figura" type="text" /><span class="unit"> м</span></div>
<div class="st1">Сторона 2:</div>
<div class="st2"><input class="figura" type="text" /><span class="unit"> м</span></div>
<div class="st1">Сторона 3:</div>
<div class="st2"><input class="figura" type="text" /><span class="unit"> м</span></div>
<h4>Сигмент 2</h4>
<div class="st1">Сторона 1:</div>
<div class="st2"><input class="figura" type="text" /><span class="unit"> м</span></div>
<div class="st1">Сторона 2:</div>
<div class="st2"><input class="figura" type="text" /><span class="unit"> м</span></div>
<h4>Сигмент 3</h4>
<div class="st1">Сторона 1:</div>
<div class="st2"><input class="figura" type="text" /><span class="unit"> м</span></div>
<div class="st1">Сторона 2:</div>
<div class="st2"><input class="figura" type="text" /><span class="unit"> м</span></div>
<div class="st1">Сторона 3:</div>
<div class="st2"><input class="figura" type="text" /><span class="unit"> м</span></div>
</div>
<div class="col-sm-4">
<h4>Сигмент 4</h4>
<div class="st1">Сторона 1:</div>
<div class="st2"><input class="figura" type="text" /><span class="unit"> м</span></div>
<div class="st1">Сторона 2:</div>
<div class="st2"><input class="figura" type="text" /><span class="unit"> м</span></div>
<div class="st1">Сторона 3:</div>
<div class="st2"><input class="figura" type="text" /><span class="unit"> м</span></div>
<h4>Сигмент 5</h4>
<div class="st1">Сторона 1:</div>
<div class="st2"><input class="figura" type="text" /><span class="unit"> м</span></div>
<div class="st1">Сторона 2:</div>
<div class="st2"><input class="figura" type="text" /><span class="unit"> м</span></div>
<div class="st1">Сторона 3:</div>
<div class="st2"><input class="figura" type="text" /><span class="unit"> м</span></div>
</div>
<div class="col-sm-6">
<img src="http://i.piccy.info/i9/5dc9e1044199780a5c682345c5e8e242/1503672360/7796/1170341/G_111.jpg" style="margin-bottom: 5px;" /><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>
<div class="rezultat ">ПЛОЩАДЬ всей фигуры = <span class="area"></span></div>
</div>
</div>