title: Typescript error: Uncaught TypeError: Cannot read property 'value' of null at HTMLButtonElement.document.getElementById.addEventListener.event
body: <p>Hello I am having trouble with this simple calculator in Typescript and I can't seem to find the issue. I don't know why I am getting the value null because it seems to me the Id's on the elements are correct</p>
  
  <p>HTML : </p>
  
  <p></p>
  
  <pre><code>X: &lt;input type="text" id="x" &gt; &amp;nbsp;
  Y: &lt;input type="text" id="y" &gt;
  &lt;br&gt;
  
  &lt;button  id="Add"&gt;Add&lt;/button&gt; &amp;nbsp;&amp;nbsp;
  &lt;button  id="Subtract"&gt;Subtract&lt;/button&gt;
  
  &lt;span id="output"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>TS: </p>
  
  <p><pre></p>
  
  <code>window.onload = function() {
      var calc = new Calculator('X','Y','Output');
  }
  
  
  class Calculator {
      private x: HTMLInputElement;
      private y: HTMLInputElement;
      private output: HTMLSpanElement;
  
      constructor(xId: string, yId:string,outputId:string) {
          this.x = &lt;HTMLInputElement&gt;document.getElementById(xId);
          this.y = &lt;HTMLInputElement&gt;document.getElementById(yId);
          this.output = &lt;HTMLSpanElement&gt;document.getElementById(outputId);
          this.wireEvents();
      }
  
      wireEvents() {
          document.getElementById('Add').addEventListener('click',event =&gt; {
              this.output.innerHTML = this.add(parseInt(this.x.value), parseInt(this.y.value)).toString()
          });
          document.getElementById('Subtract').addEventListener('click',event =&gt; {
              this.output.innerHTML = this.subtract(parseInt(this.x.value), parseInt(this.y.value)).toString();
          });
      };
  
      add(x:number,y:number) {
          return x+y;
      }
      subtract(x:number,y:number){
          return x-y; 
      }
  
  }
  </code></pre>