Добрый день, делаю небольшой калькулятор, не получается вывести результат сложения чисел в документ
Вот код :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>CALC</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<table border="1">
<tr>
<td>Введите сумму банковской гарантии</label></td>
<td>Введите срок банковской гарантии</td>
</tr>
<tr>
<th><input type="number" id="banksum" placeholder="сумма банковской гарантии"></th>
<th><input type="number" id="banktime" placeholder="срок банковской гарантии"></th>
</tr>
<tr>
<td><label><input type="checkbox">Бесспорное списание (5%)</label></td>
<td><label><input type="checkbox">Аванс в контракте (10%)</label></td>
</tr>
<tr>
<td><label><input type="checkbox">Форма БГ от заказчика (10%)</label></td>
<td><label><div id="">Итого :<span id="totalsum"></span></div></label></td>
</tr>
</table>
<script type="text/javascript">
// $( document ).ready(function() {
// alert( "ready!" );
// });
</script>
<script type="text/javascript">
$( document ).ready(function() {
var
$summabg = $( '#banksum').val(),
$periodbg = $('#banktime').val(),
$total = $('#totalsum').val()
$total = $summabg + $periodbg;
// var summabg = ('#banksum').value();
// var periodbg = ('#banktime').value();
// var total = ('#totalsum').value();
});
</script>
</body>
</html>
Подскажите, как правильно выводить результат, чтобы напротив Итого выводился результат сложения двух полей ?