<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Calculation elongation</title>
</head>
<body>
<style type="text/css">
body {padding:0; background-color: silver;}
#table_wrapper { background-color: #3F74AA; padding: 25px; width:100%;}
.left { text-align: right; font-weight: bold; }
.right { padding-right: 40px; }
.right input { width: 150px;}
</style>
<script type="text/javascript">
function calculate(){
var C2 = parseFloat(document.getElementById('C2').value);
var C3 = parseFloat(document.getElementById('C3').value);
var C4 = parseFloat(document.getElementById('C4').value);
var C5 = parseFloat(document.getElementById('C5').value);
var C6 = parseFloat(document.getElementById('C6').value);
var C7 = parseFloat(document.getElementById('C7').value);
var C9 = parseFloat(document.getElementById('C9').value);
C9.value = (((((C7*C4)/1000)*(9,81*C6))*C2)/C5)/C3*10;
}
</script>
<center>
<h1>Calculation elongation</h1>
<div id="table_wrapper">
<table>
<tr>
<td class="left">value1</td>
<td class="right"><input onkeyup="calculate();" type="text" id="C2" /></td>
</tr>
<tr>
<td class="left">value2</td>
<td class="right"><input onkeyup="calculate();" type="text" id="C3" /></td>
</tr>
<tr>
<td class="left">value3</td>
<td class="right"><input onkeyup="calculate();" type="text" id="C4" /></td>
</tr>
<tr>
<td class="left">value4</td>
<td class="right"><input onkeyup="calculate();" type="text" id="C5" /></td>
</tr>
<tr>
<td class="left">value5</td>
<td class="right"><input onkeyup="calculate();" type="text" id="C6" /></td>
</tr>
<tr>
<td class="left">value6</td>
<td class="right"><input onkeyup="calculate();" type="text" id="C7" /></td>
</tr>
<tr>
<td class="left"> </td>
<td class="right"></td>
</tr>
<tr>
<td class="left">antwoord:</td>
<td class="right"><input type="text" id="C9" /></td>
</tr>
</table>
</div>
</center>
</body>
</html>