How to construct TypeScript object with HTML input values?

Question

This should be very basic but I am unable to get through it.

I have a class like:

class MyObject {
    value: number;
    unit: string; 

    constructor(value: number, unit: string){
         this.value = value;
         this.unit = unit;
    }
}

Then in HTML,

    <input id="myValue" type="number"></input>
    <input id="myUnit" type="text"></input>

I want to create an Object of "MyObject" class using myValue and myUnit. How do I do that ?

Something like:

    var value = document.getElementById("myValue");
    var unit = document.getElementById("myUnit"); 
    myObject: MyObject = new MyObject(value, unit);

Unable to do it the above way. What's the way to go about with this ?

try to change `var value = document.getElementById("myValue");` to `var value = parseFloat(document.getElementById("myValue"));`. text-input is a string, but you need a number like in your declaration. — Joshua K, Aug 10 '15 at 14:41
oh and change `myObject: MyObject = new MyObject(value, unit);` to `myObject = new MyObject(value, unit);`. The other way to create an object: `var myObject:MyObject = new MyObject(value, unit);` (take care of the "var" keyword) — Joshua K, Aug 10 '15 at 14:49
I am also doing document.getElementById(".. ").nodeValue to get no compilation error.. It is requiring nodeValue..for both text and number.. parseFloat is fine for number..Will update once I run it... — Anmol Gupta, Aug 10 '15 at 15:01
ah my bad. you forgot the `.value` in the first two lines. the variables `value` and `unit` are holding objects of type HTMLElement (DOMElement). You have to access the `.value` property to get strings out of it. Sorry. Didn't see it the first time. But.... this are javascript basics and has nothing to do with typescript. — Joshua K, Aug 10 '15 at 15:41

score 24 · Accepted Answer · edited May 23 '17 at 12:10

Here is the final answer which works in TypeScript (Reference for casting HTMLElement to HTMLInputElement: The property 'value' does not exist on value of type 'HTMLElement' )

var value = parseFloat((<HTMLInputElement>document.getElementById("myValue")).value);
var unit = (<HTMLInputElement>document.getElementById("myUnit")).value; 
myObject: MyObject = new MyObject(value, unit);

It was important to cast HTMLElement to HTMLInputElement, otherwise 'value' property doesn't exist for HTMLElement in TypeScript and TypeScript compiler will show error.

score 9 · Answer 2 · answered Nov 23 '16 at 08:39

let value : number = parseFloat((<HTMLInputElement>document.getElementById("myValue")).value);
let unit : string = (<HTMLInputElement>document.getElementById("myUnit")).value; 

myObject: MyObject = new MyObject(value, unit);

It could also be written like this:

let value : number = parseFloat((document.getElementById("myValue") as HTMLInputElement).value);
let unit : string = (document.getElementById("myUnit") as HTMLInputElement).value; 

myObject: MyObject = new MyObject(value, unit);

Note that I have not used var but instead let, which gives you better control over your code.

Note: using as or direct casting via <> is up to you. Personally I don't know typescript that well to know the specific difference. My guess is that using 'as' does an extra check just like C#, but how it does error handling in case it is not an HTMLInputElement, I don't know that. (maybe somebody can comment on that).

In the typescript tutorial they also use "as": http://www.typescriptlang.org/docs/handbook/asp-net-4.html

score 1 · Answer 3 · answered Aug 11 '15 at 01:30

1

Change :

var value = document.getElementById("myValue");
var unit = document.getElementById("myUnit"); 
myObject: MyObject = new MyObject(value, unit);

To:

var value = parseFloat(document.getElementById("myValue").value);
var unit = parseFloat(document.getElementById("myUnit").value); 
myObject: MyObject = new MyObject(value, unit);

answered Aug 11 '15 at 01:30

basarat

261,912
58
460
511

.value doesn't work in typescript. So, had to make it work by casting HTMLElement to HTMLInputElement as per this answer: http://stackoverflow.com/questions/12989741/the-property-value-does-not-exist-on-value-of-type-htmlelement – Anmol Gupta Aug 11 '15 at 14:14

How to construct TypeScript object with HTML input values?

3 Answers3