JS input fields example
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<section class="container">
<div id="income">
<table>
<tr>
<th colspan="10">Доходы</th>
</tr>
<tr>
<td class="padding" colspan="8">Доход от малого бизнеса (пасив):</td>
<td colspan="2"><input class="small" type="number"></td>
</tr>
<tr>
<td class="padding" colspan="8">Доход от малого бизнеса (пасив):</td>
<td colspan="2"><input class="small" type="number"></td>
</tr>
<tr>
<td class="padding" colspan="8">Доход от малого бизнеса (пасив):</td>
<td colspan="2"><input class="small" type="number"></td>
</tr>
<tr>
<td class="padding" colspan="8">Доход от малого бизнеса (пасив):</td>
<td colspan="2"><input class="small" type="number"></td>
</tr>
<tr>
<td class="padding" colspan="8">Доход от малого бизнеса (пасив):</td>
<td colspan="2"><input class="small" type="number"></td>
</tr>
<tr>
<td class="padding" colspan="8">Доход от малого бизнеса (пасив):</td>
<td colspan="2"><input class="small" type="number"></td>
</tr>
<tr>
<td class="padding" colspan="8">Доход от малого бизнеса (пасив):</td>
<td colspan="2"><input class="small" type="number"></td>
</tr>
<tr>
<td class="padding" colspan="8">Доход от малого бизнеса (пасив):</td>
<td colspan="2"><input class="small" type="number"></td>
</tr>
<tr>
<td class="padding" colspan="8">Доход от малого бизнеса (пасив):</td>
<td colspan="2"><input class="small" type="number"></td>
</tr>
<tr>
<td class="padding" colspan="8">Доход от малого бизнеса (пасив):</td>
<td colspan="2"><input class="small" type="number"></td>
</tr>
</table>
</div>
<!--Общие доходы и расход-->
<div id="income-expenses">
<table>
<tr>
<td colspan="5">Пассивный доход</td>
<td colspan="5"><span id="active">Результат</span></td>
</tr>
</table>
<button onclick="plus()">Вычислить</button>
</div>
</section>
<script src="build/js/script.js"></script>
</body>
</html>
CSS
.container{
margin: 0 auto;
width: 1100px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
a{
color: #253cc5;
}
.row{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
table{
border-collapse: collapse;
}
#income th, td, tr{
border: solid 2px #000000;
}
.padding {
padding-right: 100px;
}
#income-expenses{
margin-left: 10px;
}
@media screen and (max-width: 2024px){
body{
background: #8f6e1b;
font-size: 25px;
color: #ffffff;
}
}
JAVASCRIPT
function plus() {
let sum = 0;
let x = document.getElementsByClassName("small");
for(let i = 0; i<x.length; i++){
console.log(x[i].value);
sum += parseInt(x[i].value) || 0;
}
document.getElementById('active').innerHTML = sum;
}
