Почему функция document.getElementById('inp').value передает текстовому полю цифры, но не арифметические знаки?

Question

WhiteBachelor @WhiteBachelor

Начинающий веб-программист.

Почему функция document.getElementById('inp').value передает текстовому полю цифры, но не арифметические знаки?

Здравствуйте. Я еще только изучаю веб-программирование и многого не знаю. Решил сделать мой первый серьезный проект - калькулятор на JS в дизайне Material. Cделал текстовое поле и кнопочки. Технически, кнопочки - непронумерованный список с выделенным и перекрашенным border'ом и событием onclick="функция(переменная)". Скрипт внешний. В каждый пункт вписана одна и та-же функция с передающимся значением: цифрами 0 - 9 и арифметическим знаком. Я планировал скидывать все цифры и знаки в текстовое поле, а затем при нажатии кнопки "=" передавать её value в функцию eval(). Но функция упрямо отказывается передавать полю арифметические знаки. Цифры переедает, а "+", "-" и другие нет. Я даже в кавычки цифры поставил, а потом явное преобразование цифр в String сделал. Результат не изменился. В чем проблема? Код я ещё не дописал, ибо бессмысленно, пока не решил первую проблему. Остался вывод ответа через функцию eval() по нажатию кнопки "=".
Вот сам код:
HTML:

<!DOCTYPE html>
<html>
<head>
	<title>Material Calculator</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src="js/script.js"></script>
</head>
<body onload="restarting()">
		<div id="content">
	<header>
		<img src="css/images/calculating.png" width="70" height="70" id="calculator_image" />
		<h1>GoodPenTester.</h1>
		<br />
		<h2><span id="dsgn">MATERIAL Design</span> <br /> JavaScript Calculator.</h2>
	</header>

	<section id="calculator_app">
		<input type="text" name="result" id="inp" placeholder="input..." />
		<ul class="math_buttons_list">
			<li class="math_elem" onclick="button_press(String("+"))">+</li>
			<li class="button" onclick="button_press(String('3'))">3</li>
			<li class="button" onclick="button_press(String('2'))">2</li>
			<li class="button" onclick="button_press(String('1'))">1</li>
	 </ul>
   <ul class="math_buttons_list">
			<li class="math_elem" onclick="button_press(String("-"))">-</li>
			<li class="button" onclick="button_press(String('6'))">6</li>
			<li class="button" onclick="button_press(String('5'))">5</li>
			<li class="button" onclick="button_press(String('4'))">4</li>
	 </ul>
	 <ul class="math_buttons_list">
			<li class="math_elem" onclick="button_press(String("*"))">*</li>
			<li class="button" onclick="button_press(String('9'))">9</li>
			<li class="button" onclick="button_press(String('8'))">8</li>
			<li class="button" onclick="button_press(String('7'))">7</li>
	 </ul>
	 <ul class="math_buttons_list">
			<li  class="math_elem" onclick="button_press(String(":"))">:</li>
			<li class="button" id="buttonE">=</li>
			<li class="button" id="button0" onclick="button_press(String('0'))">0</li>
		</ul>
	</section>
</div>
</body>
</html>

CSS:

@font-face {
	font-family: Roboto-Light;
	src: url(fonts/Roboto-Light.ttf);
}
@font-face {
	font-family: Roboto-Regular;
	src: url(fonts/Roboto-Regular.ttf);
}
@font-face {
	font-family: Roboto-LightItalic;
	src: url(fonts/Roboto-LightItalic.ttf);
}
@font-face {
	font-family: Roboto-Thin;
	src: url(fonts/Roboto-Thin.ttf);
}

/*/////////////////////////////////////*/

*{
	padding: 0;
  margin: 0;
	outline: none;
}

*:focus {
	outline: none;
}
body{
	font-family: "Roboto-Regular";
	background-color: #dce8fa;
}

header{
	background: -webkit-linear-gradient(260deg,#4d61b0 0%,#6ec0e6 63%);
	width: 90%;
	margin: 15px;
	margin-top: 10px;
	margin-left: 18px;
	padding: 10px;
	font-family: Roboto-Thin;
	color: #405f6e;
	box-shadow: 3px 10px 15px 5px #999999;
	overflow: hidden;
}

#dsgn{
	font-family: Roboto-Regular;
}

#calculator_image{
	float: right;
	margin: 20px;
	margin-top: 10px;
}

#content{
	/*background-color: #c3e6f7;*/
	background-color: white;
	width: 45%;
	margin: 15px;
	margin-left: 25%;
	padding: 20px;
	padding-top: 5px;
	font-family: Roboto-Thin;
	color: #405f6e;
	box-shadow: 3px 10px 15px 5px #999999;
	overflow: hidden;
}

#calculator_app{
	margin-top: 30px;
	border: 2px solid #6ec0e6;
	border-radius: 10px;
	width: 60%;
	height: 300px;
	margin-left: 20%;
	box-shadow: 3px 4px 10px 3px #999999;

}

#inp{
	width: 90%;
	height: 30px;
	margin-top: 20px;
	margin-left: 5%;
	margin-bottom: 25px;
	background-color: white;
	color: #405f6e;
	font-size: 1.5em;
	border: 0px;
	box-shadow:  3px 3px 7px 3px #999999;
}

.math_buttons_list{
	font-family: Roboto-Regular;
	font-size: 20px;
	margin-bottom: 15px;
	list-style-type: none;
	border: 0px solid lightgrey;
	overflow: hidden;
	width: 66%;
	height: 40px;
	margin-left: 16%;
	text-align: center;

}

.math_buttons_list .button{
	float: right;
	padding: 5px;
	margin-left: 5px;
	margin-right: 5px;
	width: 40px;
	height: 20px;
	text-align: center;
	overflow: hidden;
	border-radius: 3px;
	background-color: #fab055;
	box-shadow:  2px 2px 4px 2px #999999;
}
.button:active{
	color: white;
	background-color: #ed8515;
	border-radius: 4px;
	border: 2px solid white;
	width: 36px;
	height: 16px;
}

.math_buttons_list .math_elem{
	float: right;
	padding: 5px;
	margin-left: 5px;
	margin-right: 5px;
	width: 40px;
	height: 20px;
	text-align: center;
	overflow: hidden;
	border-radius: 3px;
	background-color: #6ec0e6;
	box-shadow:  2px 2px 4px 2px #999999;
}
.math_elem:active{
	color: white;
	background-color: #4d61b0;
	border-radius: 4px;
	border: 2px solid white;
	width: 36px;
	height: 16px;
}

#button0{
	width: 98px;
}
#buttonE{
	background-color: #60db66;
}
#buttonE:active{
	background-color: #2aa130;
}

JavaScript:

function restarting(){
  document.getElementById('inp').value = '';
}

function button_press(num=""){
  document.getElementById('inp').value += String(num);
}

Визуально, если что, все выглядит идеально. Почти как настоящий калькулятор. По крайней мере на моем мониторе.
Помогите профану пожалуйста.