Getting [object HTMLInputElement] in display instead of number

Question

I am taking a number as an input from an input box and on clicking a button, I want the number to be displayed on the page. But I am getting, [object HTMLInputElement] as the output.

Here's my typescript code:

let quantity = <HTMLInputElement>document.createElement("input");
quantity.type = "number"
quantity.id = "quan"
document.body.appendChild(quantity)

var getQuantity = <HTMLInputElement>document.getElementById("quan");
let gq = getQuantity.toString()

var btn = <HTMLButtonElement>document.createElement("button");
document.body.appendChild(btn)

btn.addEventListener('click', function(){
    Display.innerHTML += "<br>"+ gq
})

Answer 1

When using .toString() , you get the string representation of the Input Element.

You want the value, so you can just call .value . In your example that would look like so:

let gq = getQuantity.value;