Здравствуйте. Я еще только изучаю веб-программирование и многого не знаю. Решил сделать мой первый серьезный проект - калькулятор на 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);
}
Визуально, если что, все выглядит идеально. Почти как настоящий калькулятор. По крайней мере на моем мониторе.
Помогите профану пожалуйста.