我正在尝试使用Javascript制作计算器.但这不起作用 [英] I am trying to make a calculator in Javascript. But it is not working somehow
问题描述
我是JavaScript初学者.我正在尝试用它建立一个计算器.它没有样式，并且有不需要的类属性.请忽略这一点.这是我要使用的代码:
I am a JavaScript beginner. I am trying to build a calculator with it. It is not styled and there are class attributes which are not required. Please ignore that. This is the code I am trying to use:
<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不允许我上传此内容.请忽略多余的内容.
But it is not working somehow. Can someone please tell me what is the flaw here.
I have tried everything. If I replace var with let. There are endless errors in Brackets.
I am writing extra stuff because stackoverflow would not let me upload this. Please ignore the extra stuff.
推荐答案
因为您是Java语言的初学者，所以让我向您展示事件委派方式和脚本位置
Because you are a Javascript beginner, let me show you event delegation way, and script placement
<!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>这篇关于我正在尝试使用Javascript制作计算器.但这不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
