Калькулятор с нестандартными свойствами
Здравствуйте, передо мной стоит задача построить калькулятор на JavaScript с использованием DHTML. А именно: нужно чтобы калькулятор был построен без id (не использовать идентификаторы вообще), а применить свойства : getElementById (), createElement (),createTextNode (), appendChild (), insertBefore (). Видел много разных примеров калькуляторов, но как применять там эти свойства так и не понял. Подскажите, пожалуйста .
|
Цитата:
|
Прошу прощения, 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(); } я просто не могу понять как здесь, к примеру, можно применить эти свойства, что я описывал выше. Не могли бы вы помочь, показав пример того, где их можно использовать в этом примере калькулятора. |
Часовой пояс GMT +3, время: 07:17. |