typescript - 未捕获的 ReferenceError：未定义 updateDisplay

问题描述

使用打字稿为个人项目构建计算器，以帮助我的知识库在语言中增长 - 逻辑就在那里（据我所知），但我不确定为什么会出现此错误：

未捕获的 ReferenceError：系统未定义

我是正确地实例化了类还是引用了错误的类？我是 typescript/Javascript 的新手，并且一直在自学。我正在使用 Gulp 构建我的计算器，在本地主机上运行时看起来像这样

文件

<!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 文件（包含计算器类）

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();
      }
    }
  }

}

索引.TS 文件

import { Calculator } from "./Calculator";

let x: object = new Calculator();

标签： typescript

typescript - 未捕获的 ReferenceError：未定义 updateDisplay - Typescript Calculator

问题描述

解决方案

推荐阅读