Patrick Bateman,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<input type="input" id="in" placeholder="Ввести сумму">
<div id="btn">
<p>10 % годовых на 3 месяца</p>
<button id="10" type="button" value="10" data-month="3">10%</button>
<p>15 % годовых на 6 месяцев</p>
<button id="15" type="button" value="15" data-month="6">15%</button>
<p>20 % годовых на год</p>
<button id="20" type="button" value="20" data-month="6">20%</button>
</div>
<div id="y"></div>
<div id="m"></div>
<script>
[].forEach.call(document.querySelectorAll('button'), function(item) {
item.addEventListener('click', function() {
var val = +this.value, month = +this.dataset.month, sum = +document.querySelector('#in').value || 0;
var c = sum * (val/100); //% за год
var d = c / 12 //% за месяц
document.querySelector('#m').innerHTML = d.toFixed(2);
sum += (d * month); //сумма с %
document.querySelector('#y').innerHTML=sum.toFixed(2);
});
});
</script>
</body>
</html>