Hello, I'm facing an issue with a simple Typescript calculator and I can't seem to figure out what's causing the problem. I'm puzzled as to why I'm receiving a null value because the element IDs appear to be correct.
HTML :
X: <input type="text" id="x" >
Y: <input type="text" id="y" >
<br>
<button id="Add">Add</button>
<button id="Subtract">Subtract</button>
<span id="output"></span>
TS:
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 = <HTMLInputElement>document.getElementById(xId);
this.y = <HTMLInputElement>document.getElementById(yId);
this.output = <HTMLSpanElement>document.getElementById(outputId);
this.wireEvents();
}
wireEvents() {
document.getElementById('Add').addEventListener('click',event => {
this.output.innerHTML = this.add(parseInt(this.x.value), parseInt(this.y.value)).toString()
});
document.getElementById('Subtract').addEventListener('click',event => {
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;
}
}