如何解决我正在尝试用Java编写计算器但这不起作用
我是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不允许我上传此内容。请忽略多余的内容。
解决方法
查看此代码段：
<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">的内容。
因为您是Java语言的初学者，所以让我向您展示事件委托方式和脚本位置
<!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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
