问题
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>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.
回答1:
Check out this snippet:
<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>Steps taken:
- In the newly created
<script>at the end of the<body>we creating variabledisplayto store reference to element<input type="text" id="displayArea">. - If user passed any digit/symbol, function
dis(val)append it to thedisplay, else if user passed empty string, functiondis(val)clears the display. - Removed unnecessary variables from function calculate().
- Function clear() is redundant and removed.
- Button
Cadded to clear contents of the<input type="text" id="displayArea">.
回答2:
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>来源：https://stackoverflow.com/questions/63724014/i-am-trying-to-make-a-calculator-in-javascript-but-it-is-not-working-somehow