#javascript #html #css #calculator
#javascript #HTML #css #калькулятор
Вопрос:
Я новичок в JavaScript. Я пытаюсь создать калькулятор с его помощью. Он не оформлен, и есть атрибуты класса, которые не требуются. Пожалуйста, игнорируйте это. Это код, который я пытаюсь использовать:
<html>
<head>
<title>HTML5 Calculator</title>
<style>
</style>
<script>
function dis(val) {
document.getElementById("displayArea").value = val;
}
function calculate() {
var finalValue = document.getElementById('diaplayArea').value;
var evaluatedValue = eval(finalValue);
document.getElementById('displayArea').value = y;
}
function clear() {
document.getElementById('displayArea').value = '';
}
</script>
</head>
<body>
<div><input type="text" id="displayArea"></div>
<h1>
<div id="buttons">
<button onclick="dis(1)" id="1" class="row-1">
1
</button>
<button onclick="dis(2)" id="2" class="row-2">
2
</button>
<button onclick="dis(3)" id="3" class="row-3">
3
</button>
<button onclick="dis(/)" id="/" class="row-4">
/
</button>
<br>
<button onclick="dis(4)" id="4" class="row-1">
4
</button>
<button onclick="dis(5)" id="5" class="row-2">
5
</button>
<button onclick="dis(6)" id="6" class="row-3">
6
</button>
<button onclick="dis(*)" id="*" class="row-4">
*
</button>
<br>
<button onclick="dis(7)" id="7" class="row-1">
7
</button>
<button onclick="dis(8)" id="8" class="row-2">
8
</button>
<button onclick="dis(9)" id="9" class="row-3">
9
</button>
<button onclick="dis( )" id=" " class="row-4">
</button>
<br>
<button onclick="dis(.)" id="." class="row-1">
.
</button>
<button onclick="dis(0)" id="0" class="row-2">
0
</button>
<button onclick="calculate()" id="calculateButton" class="row-3">
=
</button>
<button onclick="dis(-)" id="-" class="row-4">
-
</button>
</div>
</h1>
</body>
</html> Но это как-то не работает. Может кто-нибудь, пожалуйста, сказать мне, в чем здесь недостаток.
Я перепробовал все. Если я заменю var на let . В скобках бесконечные ошибки.
Я пишу дополнительные материалы, потому что stackoverflow не позволил бы мне загрузить это. Пожалуйста, игнорируйте лишние вещи.
Комментарии:
1. Определить «Это не работает»?
2. var для разрешения создает ошибки? что это за ошибки?
3. Орфографическая ошибка:
diaplayArea4. Заключите dis(/) в кавычки, так что это dis(‘/’)
5. Здесь есть целая куча проблем. Обучение использованию инструментов разработчика ваших браузеров укажет вам многие из них.
Ответ №1:
Посмотрите этот фрагмент:
<html>
<head>
<title>HTML5 Calculator</title>
<style>
</style>
<script>
function dis(val) {
if(val != '')
display.value = val;
else
display.value = val;
}
function calculate() {
display.value = eval(display.value);
}
</script>
</head>
<body>
<div>
<input type="text" id="displayArea">
<button onclick="dis('')" >
C
</button>
</div>
<h1>
<div id="buttons">
<button onclick="dis('1')" id="1" class="row-1">
1
</button>
<button onclick="dis('2')" id="2" class="row-2">
2
</button>
<button onclick="dis('3')" id="3" class="row-3">
3
</button>
<button onclick="dis('/')" id="/" class="row-4">
/
</button>
<br>
<button onclick="dis('4')" id="4" class="row-1">
4
</button>
<button onclick="dis('5')" id="5" class="row-2">
5
</button>
<button onclick="dis('6')" id="6" class="row-3">
6
</button>
<button onclick="dis('*')" id="*" class="row-4">
*
</button>
<br>
<button onclick="dis('7')" id="7" class="row-1">
7
</button>
<button onclick="dis('8')" id="8" class="row-2">
8
</button>
<button onclick="dis('9')" id="9" class="row-3">
9
</button>
<button onclick="dis(' ')" id=" " class="row-4">
</button>
<br>
<button onclick="dis('.')" id="." class="row-1">
.
</button>
<button onclick="dis(0)" id="0" class="row-2">
0
</button>
<button onclick="calculate()" id="calculateButton" class="row-3">
=
</button>
<button onclick="dis('-')" id="-" class="row-4">
-
</button>
</div>
</h1>
<script type="text/javascript">
const display = document.getElementById("displayArea");
</script>
</body>
</html> Предпринятые шаги:
- Во вновь созданной
<script>в конце<body>мы создаем переменнуюdisplayдля хранения ссылки на элемент<input type="text" id="displayArea">. - Если пользователь передал какую-либо цифру / символ, функция
dis(val)добавляет его кdisplay, иначе, если пользователь передал пустую строку, функцияdis(val)очищает дисплей. - Удалены ненужные переменные из функции calculate().
- Функция clear() является избыточной и удалена.
CДобавлена кнопка для очистки содержимого<input type="text" id="displayArea">.
Ответ №2:
Поскольку вы новичок в Javascript, позвольте мне показать вам способ делегирования событий и размещение скрипта
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>calculator</title>
<style>
#buttons button {
width: 4em;
float: left;
margin: .2em;
}
#buttons button:nth-of-type(4n 1) {
clear: left; /* replace <br> */
}
#buttons button:nth-of-type(4n) {
margin-left: 1em;
}
</style>
</head>
<body>
<div>
<button id="bt-clear"> c </button>
<input type="text" id="display-area">
</div>
<h1>
<div id="buttons">
<button> 1 </button> <button> 2 </button> <button> 3 </button> <button> / </button>
<button> 4 </button> <button> 5 </button> <button> 6 </button> <button> * </button>
<button> 7 </button> <button> 8 </button> <button> 9 </button> <button> </button>
<button> . </button> <button> 0 </button> <button> = </button> <button> - </button>
</div>
</h1>
<script> // script part is under any htlm body tags
const buttons = document.getElementById('buttons')
, btClear = document.getElementById('bt-clear')
, displayArea = document.getElementById('display-area')
;
btClear.onclick = () =>
{
displayArea.value = ''
}
buttons.onclick = e => // event delegation.
{
if (!e.target.matches('button')) return // ignore other clicks
let btVal = e.target.textContent.trim()
switch (btVal)
{
case '=':
displayArea.value = eval(displayArea.value)
break;
case '/':
case '*':
case ' ':
case '-':
displayArea.value = ` ${btVal} `
break;
default:
displayArea.value = btVal
break;
}
}
</script>
</body>
</html>