Прошу прощения, getElementById () лишнее. Это задание для получения долдности стажера веб-рограммиста в одной из компаний моего города. Вот калькулятор, который я бы мог создать (имею в виду, что мне все понятно в нем), но так как он уже есть в сети, просто покажу его:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Калькулятор HTML&JavaScript</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="mainDiv" align="center" >
<p>Калькулятор</p>
<form>
<table >
<tr>
<td colspan="3"><input type="text" id="textField" readonly /></td>
<td><input type="submit" id="submitButton" value="="/></td>
</tr>
<tr>
<td><input type="button" value="1" onclick="addToField(1)"/></td>
<td><input type="button" value="2" onclick="addToField(2)"/></td>
<td><input type="button" value="3" onclick="addToField(3)"/></td>
<td><input type="button" value="-" onclick="addToField('-')"/></td>
</tr>
<tr>
<td><input type="button" value="4" onclick="addToField(4)"/></td>
<td><input type="button" value="5" onclick="addToField(5)"/></td>
<td><input type="button" value="6" onclick="addToField(6)"/></td>
<td><input type="button" value="+" onclick="addToField('+')"/></td>
</tr>
<tr>
<td><input type="button" value="7" onclick="addToField(7)"/></td>
<td><input type="button" value="8" onclick="addToField(8)"/></td>
<td><input type="button" value="9" onclick="addToField(9)"/></td>
<td><input type="button" value="/" onclick="addToField('/')"/></td>
</tr>
<tr>
<td><input type="button" value="." onclick="addToField('.')"/></td>
<td><input type="button" value="0" onclick="addToField(0)"/></td>
<td><input type="button" value="Пи" onclick="addToField(3.14159265359)"/></td>
<td><input type="button" value="*" onclick="addToField('*')"/></td>
</tr>
<tr>
<td><input type="button" value="x^2" onclick="power(2)"/></td>
<td><input type="button" value="x^3" onclick="power(3)"/></td>
<td><input type="button" value="10^x" onclick="powten()"/></td>
<td><input type="reset" value="C" id="resetButton"/></td>
</tr>
</table>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
CSS:
p{
font: 20px tahoma;
}
mainDiv{
background: skyblue;
width:350px;
margin:20px auto;
box-shadow:10px 10px 150px grey;
padding-top: 5px;
padding-bottom: 20px;
}
input[type="submit"]{
width:50px;
height:30px;
opacity:0.8;
border:0px;
}
input[type="button"], input[type="reset"]{
width:50px;
height:50px;
opacity:0.8;
border:0px;
}
input[type="text"]{
border:0px;
outline: none;
opacity:0.8;
height:27px;
width:159px;
}
input:hover{
opacity:1;
}
JS:
var textField = document.getElementById('textField');
textField.focus();
var submit = document.getElementById('submitButton');
submit.addEventListener('click', buttonClicked, false);
function buttonClicked(e) {
e.preventDefault();
x = textField.value;
try {
x = eval(x);
textField.value = x;
} catch (ex) {
alert('Неверный формат');
}
}
function addToField(n) {
textField.value += n;
textField.focus();
}
function power(y) {
x = textField.value;
x = Math.pow(x, y);
textField.value = x;
textField.focus();
}
function powten() {
x = textField.value;
x = Math.pow(10, x);
textField.value = x;
textField.focus();
}
я просто не могу понять как здесь, к примеру, можно применить эти свойства, что я описывал выше. Не могли бы вы помочь, показав пример того, где их можно использовать в этом примере калькулятора.