Здравствуйте Форумчане!
Нужна небольшая помощь, решил начать изучать "html css javascript",
и получил задание написать простейший калькулятор, за основу взял html + javascript
:
<body>
<form name="taschenrechner" id="calculator">
<table>
<tr>
<td>
<input type="text" name="input" size="16" class="display">
</td>
</tr>
<tr>
<td class="buttons">
<input type="button" name="ein" value="1" OnClick="taschenrechner.input.value += '1'">
<input type="button" name="zwei" value="2" OnClick="taschenrechner.input.value += '2'">
<input type="button" name="drei" value="3" OnClick="taschenrechner.input.value += '3'">
<input type="button" name="add" value="+" onclick="taschenrechner.input.value += '+'" >
<br>
<input type="button" name="vier" value="4" OnClick="taschenrechner.input.value += '4'">
<input type="button" name="funf" value="5" OnClick="taschenrechner.input.value += '5'">
<input type="button" name="sechs" value="6" OnClick="taschenrechner.input.value += '6'">
<input type="button" name="sub" value="-" OnClick="taschenrechner.input.value += '-'">
<br>
<input type="button" name="sieben" value="7" OnClick="taschenrechner.input.value += '7'">
<input type="button" name="acht" value="8" OnClick="taschenrechner.input.value += '8'">
<input type="button" name="neun" value="9" OnClick="taschenrechner.input.value += '9'">
<input type="button" name="zehn" value="x" OnClick="taschenrechner.input.value += '*'">
<br>
<input type="button" name="clear" value="c" OnClick="taschenrechner.input.value = ''">
<input type="button" name="null" value="0" OnClick="taschenrechner.input.value += '0'">
<input type="button" name="macht" value="=" OnClick="taschenrechner.input.value = eval(taschenrechner.input.value)">
<input type="button" name="div" value="/" OnClick="taschenrechner.input.value += '/'">
</td>
</tr>
</table>
</form>
</body>
и css:
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font: bold 14px Arial, sans-serif;
}
html {
height: 100%;
background: white;
background: radial-gradient(circle, #fff 20%, #ccc);
background-size: cover;
}
#calculator * {font-size: 20px;}
#calculator table {
border: solid 3px silver;
border-spacing: 3px;
background-color: #EEE;
}
#calculator table td {border-spacing: 3px;}
#calculator table {margin: 100px auto;}
input.display {
width: 275px;
height:40px;
text-align: right;
}
td.buttons {border-top: solid 1px silver;}
input[type= button] {
width: 65px;
height: 50px;
}
</style>
И мне кажется, что выглядит все очень слабенько, поэтому хочу до усовершенствовать, а именно:
1) Улучшить javascript путем вынесения обработчиков во внешние функции (отделение во внешний файл);
2) Вместо имен объектов использовать идентификаторы и обращаться к ним через GetElementByID;
PS (Так же брал другой скрипт, красивый калькулятор с
thecodeplayer , мне все очень понравилось, потратил на него 2 дня, но javascript показался мне очень сложным, не могу его понять, я мне нужно будет потом объяснить что к чему) (Написал для того, что может кто знает этот скрипт и сможет мне объяснить)))
Обращаюсь на форум как в последнюю инстанцию, т.к. времени у меня осталось до вечера, и смогу ли все успеть не факт, поэтому буду очень рад любому совету и любой помощи.
Заранее очень благодарен
С ув. Сергей!