Простейший веб-калькулятор, почему не работает?

Question

[PR1YD]

Только начал изучать веб-программирование. Начал практиковаться с создания простейшего калькулятора(c помощью jQuery). При нажатии на кнопку(Submit) значение поля result не изменяется, код:

HTML:

<div class="form">

		<!-- Technical part	 -->	
		<p>Calculator</p>
		<label class="n1-text">Number 1:</label>
		<input id="n1" type="text" class="number">
		<br>
		<label class="n1-text">Number 2:</label>
		<input id="n2"  type="text" class="number">
		<br>
		<button class="btn-submit">Submit</button>

		<!-- Result part -->
		<p class="p-result">Result</p>
		<input id="result" type="text" class="input-result" disabled>

	</div>

CSS(На всякий случай):

body {
	height: 200px;
    background: linear-gradient(45deg, #EECFBA, #C5DDE8);
    font-family: 'Varela Round', sans-serif;
}

.form {
	height: 500px;
	width: 400px;
	background: #10cdef;
	border: 4px #1fb6d1 solid; 
	margin: 0 auto;
	margin-top: 50px;
}

p {
	font-family: 'Varela Round';
	font-weight: bold;
	font-size: 20px; 
	margin-left: 145px;
}
.number {
	margin-left: 10px;
	border: 3px #1fb6d1 solid;
	margin-bottom: 10px;
}
.n1-text {
	margin-left: 5px;
}

.btn-submit {
	height: 30px;
	width: 70px;
	background-color: #1ac1db;
	border: 3px #28aac1 solid;

	margin-left: 162px;
	margin-top: 15px;

	cursor: pointer;
}

.p-result {
	margin-left: 166px;
	margin-top: 50px;
}

.input-result {
	height: 20px;
	width: 180px;
	border: 4px #1fb6d1 solid;

	margin-left: 100px;a
}

jQuery:

var n1, n2, result;

var n1 = $("#n1").val();
var n2 = $("#n2").val();

$(".btn-submit").click(function(event) {
	$("#result").val($(n1 + n2).text());
})

Answer 1

[lamer350]

$("#result").val(n1 + n2);