Как взять значение input-а не в строчный тип,а в числовой для калькулятора чтобы прибавить два значения

$('document').ready(function(){
	
	$('button').on('click',function(){
		var a,b,c,d;
		a=$('#val1').val();
		b=$('#val2').val();
		alert(a+b);
	});


	
});
body{
	background-color: #333;
	padding:5px;
	margin:5px;
}
div{
	margin:10px;
	padding:10px;
	border-color: white;
}
input{
	margin:5px;
	padding: 5px;
}
b{
	color:white;
	margin:7px;
	padding: 7px;

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Mypracticetest</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="script.js"></script>
	


</head>
<body>
	
	<div align="center">
		<b>Калькулятор</b><br>
		<input type="number" name="" id="val1"><br/>
		<input type="number" name="" id="val2"><br/>
		<button>Ответ</button>
	</div>
	
</body>
</html>


Ответы (1 шт):

Автор решения: CbIPoK2513

Из инпута вы получаете всегда строку, по этому её нужно "перевести" в "число"

$('button').on('click', function() {
  var a, b, c, d;
  a = Number($('#val1').val());
  b = Number($('#val2').val());
  alert(a + b);
});
body {
  background-color: #333;
  padding: 5px;
  margin: 5px;
}

div {
  margin: 10px;
  padding: 10px;
  border-color: white;
}

input {
  margin: 5px;
  padding: 5px;
}

b {
  color: white;
  margin: 7px;
  padding: 7px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div align="center">
  <b>Калькулятор</b><br>
  <input type="number" name="" id="val1"><br/>
  <input type="number" name="" id="val2"><br/>
  <button>Ответ</button>
</div>


Либо используйте eval()

$('button').on('click', function() {
  var a, b, c, d;
  a = $('#val1').val();
  b = $('#val2').val();
  alert(eval(a+'+'+b));
});
body {
  background-color: #333;
  padding: 5px;
  margin: 5px;
}

div {
  margin: 10px;
  padding: 10px;
  border-color: white;
}

input {
  margin: 5px;
  padding: 5px;
}

b {
  color: white;
  margin: 7px;
  padding: 7px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div align="center">
  <b>Калькулятор</b><br>
  <input type="number" name="" id="val1"><br/>
  <input type="number" name="" id="val2"><br/>
  <button>Ответ</button>
</div>

→ Ссылка