title: Uncaught ReferenceError: updateDisplay is not defined - Typescript Calculator
body: <p>Building a calculator using typescript for a personal project, to help my knowledge base grow in the language - the logic is there (As far as I know), but I am unsure why I am getting this error:</p>
  
  <p><strong><em>Uncaught ReferenceError: System is not defined</em></strong></p>
  
  <p>Am I instantiating the class correctly or am i referencing the class wrong? 
  I am new to typescript/Javascript and have been self-learning as I go. 
  I am using Gulp to build my calculator and it looks like this when run on my local host</p>
  
  <p><a href="https://i.stack.imgur.com/jyeWs.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jyeWs.jpg" alt="enter image description here"></a></p>
  
  <p><strong>HTML FILE</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Kyle-culator&lt;/title&gt;
      &lt;link rel="stylesheet" href="styles/index.css"&gt;
  
      &lt;script src="scripts/index.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;section class="Calculator" &gt;
          &lt;div class="header"&gt;
              &lt;img src="art/loading.gif" alt="Be patient..." /&gt;
          &lt;/div&gt;
          &lt;div class="Display_container"&gt;
              &lt;input class="Display_result input" id="input" placeholder="0" type="text" readonly="readonly"&gt;&lt;/input&gt;
              &lt;input class="Display_result answer" id="answer"  type="text" readonly="readonly"&gt;&lt;/input&gt;
          &lt;/div&gt;
          &lt;div class="Input_container"&gt;
              &lt;div class="numbers"&gt;
                  &lt;input class="CalcInput Button19 operator" id="MC" alt="MC" src="art/but-mc.png" type="image" onclick="memoryClear()"&gt;&lt;/input&gt;
                  &lt;input class="CalcInput Button19 operator" id="MR" alt="MR" src="art/but-mr.png" type="image" onclick="memoryRead()"&gt;&lt;/input&gt;
                  &lt;input class="CalcInput Button1 operator" id="MS" alt="MS" src="art/but-ms.png" type="image" onclick="memorySave()"&gt;&lt;/input&gt; 
                  &lt;input class="CalcInput Button17 operator" id="clear" alt="C" src="art/but-clear.png" type="image" onclick="clearScreen()"&gt;&lt;/input&gt; &lt;br&gt;
  
                  &lt;input class="CalcInput Button19 operator" id="backspace" alt="Back" src="art/but-back.png" type="image" onclick="removeLastEntry()"&gt;&lt;/input&gt;
                  &lt;input class="CalcInput Button1 operator" id="power" alt="^" src="art/but-exp.png" type="image" onclick="updateDisplay('^')"&gt;&lt;/input&gt;
                  &lt;input class="CalcInput Button16 operator" id="percent" alt="%" src="art/but-perc.png" type="image" onclick="updateDisplay('%')"&gt;&lt;/input&gt;
                  &lt;input class="CalcInput Button15 operator" id="multiply" alt="*" src="art/but-multi.png" type="image" onclick="updateDisplay('*')"&gt;&lt;/input&gt;&lt;br&gt;
  
                  &lt;input class="CalcInput Button1 number" id="one" alt="1" src="art/but-1.png" type="image" onclick="updateDisplay(1)"&gt;&lt;/input&gt;
                  &lt;input class="CalcInput Button2 number" id="two" alt="2" src="art/but-2.png" type="image" onclick="updateDisplay(2)"&gt;&lt;/input&gt;
                  &lt;input class="CalcInput Button3 number" id="three" alt="3" src="art/but-3.png" type="image" onclick="updateDisplay(3)"&gt;&lt;/input&gt; 
                  &lt;input class="CalcInput Button12 operator" id="addition" alt="+" src="art/but-add.png" type="image" onclick="updateDisplay('+')"&gt;&lt;/input&gt;&lt;br&gt;
  
                  &lt;input class="CalcInput Button4 number" id="four" alt="4" src="art/but-4.png" type="image" onclick="updateDisplay(4)"&gt;&lt;/input&gt;
                  &lt;input class="CalcInput Button5 number" id="five" alt="5" src="art/but-5.png" type="image" onclick="updateDisplay(5)"&gt;&lt;/input&gt;
                  &lt;input class="CalcInput Button6 number" id="six" alt="6" src="art/but-6.png" type="image" onclick="updateDisplay(6)"&gt;&lt;/input&gt;
                  &lt;input class="CalcInput Button13 operator" id="subtraction" alt="-" src="art/but-sub.png" type="image" onclick="updateDisplay('-')"&gt;&lt;/input&gt;&lt;br&gt;
  
                  &lt;input class="CalcInput Button7 number" id="seven" alt="7" src="art/but-7.png" type="image" onclick="updateDisplay(7)"&gt;&lt;/input&gt;
                  &lt;input class="CalcInput Button8 number" id="eight" alt="8" src="art/but-8.png" type="image" onclick="updateDisplay(8)"&gt;&lt;/input&gt;
                  &lt;input class="CalcInput Button9 number" id="nine" alt="9" src="art/but-9.png" type="image" onclick="updateDisplay(9)"&gt;&lt;/input&gt;
                  &lt;input class="CalcInput Button14 operator" id="division" alt="/" src="art/but-div.png" type="image" onclick="updateDisplay('/')"&gt;&lt;/input&gt; &lt;br&gt;
  
                  &lt;input class="CalcInput Button10 number" id="null" alt="0" src="art/but-0.png" type="image" onclick="updateDisplay(0)"&gt;&lt;/input&gt;
                  &lt;input class="CalcInput Button11 operator" id="point" alt="." src="art/but-point.png" type="image" onclick="updateDisplay('.')"&gt;&lt;/input&gt;
                  &lt;input class="CalcInput Button18 operator" id="equal" alt="=" src="art/but-equal.png" type="image" onclick="generateAnswer()"&gt;&lt;/input&gt; 
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CALCULATOR.TS FILE (Holds Calculator Class)</strong></p>
  
  <pre><code>export class Calculator implements ICalculator {
    sessionStorageKey: string;
  
    constructor() {}
  
    getAnswerElement(): HTMLInputElement {
      return &lt;HTMLInputElement&gt;document.getElementById("answer");
    }
  
    getInputElement(): HTMLInputElement {
      return &lt;HTMLInputElement&gt;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();
        }
      }
    }
  
  }
  </code></pre>
  
  <p>INDEX.TS FILE </p>
  
  <pre><code>import { Calculator } from "./Calculator";
  
  let x: object = new Calculator();
  </code></pre>