使用打字稿为个人项目构建计算器,以帮助我的语言基础发展-据我所知,逻辑存在(据我所知),但是我不确定为什么会出现此错误:
未捕获的ReferenceError:未定义系统
我正确地实例化了类还是我错误地引用了类? 我是TypeScript / Javascript的新手,并且一直在自我学习。 我正在使用Gulp构建计算器,在本地主机上运行时看起来像这样
HTML文件
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kyle-culator</title>
<link rel="stylesheet" href="styles/index.css">
<script src="scripts/index.min.js" type="text/javascript"></script>
</head>
<body>
<section class="Calculator" >
<div class="header">
<img src="art/loading.gif" alt="Be patient..." />
</div>
<div class="Display_container">
<input class="Display_result input" id="input" placeholder="0" type="text" readonly="readonly"></input>
<input class="Display_result answer" id="answer" type="text" readonly="readonly"></input>
</div>
<div class="Input_container">
<div class="numbers">
<input class="CalcInput Button19 operator" id="MC" alt="MC" src="art/but-mc.png" type="image" onclick="memoryClear()"></input>
<input class="CalcInput Button19 operator" id="MR" alt="MR" src="art/but-mr.png" type="image" onclick="memoryRead()"></input>
<input class="CalcInput Button1 operator" id="MS" alt="MS" src="art/but-ms.png" type="image" onclick="memorySave()"></input>
<input class="CalcInput Button17 operator" id="clear" alt="C" src="art/but-clear.png" type="image" onclick="clearScreen()"></input> <br>
<input class="CalcInput Button19 operator" id="backspace" alt="Back" src="art/but-back.png" type="image" onclick="removeLastEntry()"></input>
<input class="CalcInput Button1 operator" id="power" alt="^" src="art/but-exp.png" type="image" onclick="updateDisplay('^')"></input>
<input class="CalcInput Button16 operator" id="percent" alt="%" src="art/but-perc.png" type="image" onclick="updateDisplay('%')"></input>
<input class="CalcInput Button15 operator" id="multiply" alt="*" src="art/but-multi.png" type="image" onclick="updateDisplay('*')"></input><br>
<input class="CalcInput Button1 number" id="one" alt="1" src="art/but-1.png" type="image" onclick="updateDisplay(1)"></input>
<input class="CalcInput Button2 number" id="two" alt="2" src="art/but-2.png" type="image" onclick="updateDisplay(2)"></input>
<input class="CalcInput Button3 number" id="three" alt="3" src="art/but-3.png" type="image" onclick="updateDisplay(3)"></input>
<input class="CalcInput Button12 operator" id="addition" alt="+" src="art/but-add.png" type="image" onclick="updateDisplay('+')"></input><br>
<input class="CalcInput Button4 number" id="four" alt="4" src="art/but-4.png" type="image" onclick="updateDisplay(4)"></input>
<input class="CalcInput Button5 number" id="five" alt="5" src="art/but-5.png" type="image" onclick="updateDisplay(5)"></input>
<input class="CalcInput Button6 number" id="six" alt="6" src="art/but-6.png" type="image" onclick="updateDisplay(6)"></input>
<input class="CalcInput Button13 operator" id="subtraction" alt="-" src="art/but-sub.png" type="image" onclick="updateDisplay('-')"></input><br>
<input class="CalcInput Button7 number" id="seven" alt="7" src="art/but-7.png" type="image" onclick="updateDisplay(7)"></input>
<input class="CalcInput Button8 number" id="eight" alt="8" src="art/but-8.png" type="image" onclick="updateDisplay(8)"></input>
<input class="CalcInput Button9 number" id="nine" alt="9" src="art/but-9.png" type="image" onclick="updateDisplay(9)"></input>
<input class="CalcInput Button14 operator" id="division" alt="/" src="art/but-div.png" type="image" onclick="updateDisplay('/')"></input> <br>
<input class="CalcInput Button10 number" id="null" alt="0" src="art/but-0.png" type="image" onclick="updateDisplay(0)"></input>
<input class="CalcInput Button11 operator" id="point" alt="." src="art/but-point.png" type="image" onclick="updateDisplay('.')"></input>
<input class="CalcInput Button18 operator" id="equal" alt="=" src="art/but-equal.png" type="image" onclick="generateAnswer()"></input>
</div>
</div>
</section>
</body>
</html>
CALCULATOR.TS FILE(持有计算器类)
export class Calculator implements ICalculator {
sessionStorageKey: string;
constructor() {}
getAnswerElement(): HTMLInputElement {
return <HTMLInputElement>document.getElementById("answer");
}
getInputElement(): HTMLInputElement {
return <HTMLInputElement>document.getElementById("input");
}
updateDisplay(value: string): void {
this.getInputElement().value += value;
}
generateAnswer(): void {
if (this.getInputElement().value.indexOf("%") !== -1) {
try {
this.percentage();
} catch (Error) {
this.invalidEntry();
}
} else if (this.getInputElement().value.indexOf("^") !== -1) {
try {
this.powerOf();
} catch (Error) {
this.invalidEntry();
}
} else {
try {
this.getAnswerElement().value = eval(this.getInputElement().value);
this.updateInput("", this.getInputElement().value);
} catch (Error) {
this.invalidEntry();
}
}
}
}
INDEX.TS文件
import { Calculator } from "./Calculator";
let x: object = new Calculator();