How to Use Document.Getelementbyid() Method in Typescript

How to use document.getElementById() method in TypeScript?

Typescript will force you to check the value is not null if you use the strictNullChecks option (or strict which includes strictNullChecks). You can either perform the test or use a not null assertion (!). Also you will need to use a type assertion to assert the html element is an HTMLFormElement as by default it will be just an HtmlElement and reset is present only HTMLFormElement

Just an assertion Assertion:

(document.getElementById('myForm') as HTMLFormElement).reset();

Assertion with check (recommended):

let form = document.getElementById('myForm')
if(form) (form as HTMLFormElement).reset(); 

Not null assertion (if you want to access just HtmlElement member):

document.getElementById('myForm')!.click()

document.getElementById is not working in TypeScript

I was able to resolve that issue by adding the 'Loaded' attribute to the "Page"and then created a method with the same name of the loaded attribute which will be having the context of the page. Below is the code.

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
<!--
Stack layout for ordering the HTML element at the login page
-->
<StackLayout class="p-20" orientation="vertical">

    <!--Fields for getting the username and password for input-->
    <TextField hint="UserName" id="usernameID" style="margin-top:5%"/> 

    <TextField hint="Password"  id="passwordID" autocorrect="false" secure="true" style="margin-top:3%"/>

    <!--Login button here-->
    <Button text="login" tap="onLogin" id="logInButton" class="btn btn-primary btn-active" style="margin-top:5%"/>
    </StackLayout>

And here goes the TypeScript

import { EventData } from 'data/observable';
import { Page } from 'ui/page';
import { TextField } from 'ui/text-field';
import { Button } from 'ui/button';

let pageLoaded = (args : EventData) =>{
    let page = <Page> args.object;
    let textValue = <TextField>page.getViewById('usernameID');
    let logInButton= <Button>page.getViewById('signUpButton');

    logInButton.on('tap',(args:EventData)=>{
        console.log('textValue :: '+textValue.text);
    });
}
export {pageLoaded}

Thanks for your help guys...Cheers :)

document.getElementById replacement in angular4 / typescript?

You can tag your DOM element using #someTag, then get it with @ViewChild('someTag').

See complete example:

import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';

@Component({
    selector: 'app',
    template: `
        <div #myDiv>Some text</div>
    `,
})
export class AppComponent implements AfterViewInit {
    @ViewChild('myDiv') myDiv: ElementRef;

    ngAfterViewInit() {
        console.log(this.myDiv.nativeElement.innerHTML);
    }
}

console.log will print Some text.

Casting document.getElementById to access files in TypeScript

This should work fine from that example, maybe you're doing something wrong there. However, you may test your code like this, replace fileChanged() by fileChanged(event) and then get the files by event.target.files

function fileChanged(event) {  var target = event.target || event.srcElement;  console.log(target.files);  console.log(document.getElementById('fileInput').files);}

<div>  <input ng-model="csv"            onchange="fileChanged(event)"            type="file" id="fileInput"/></div>

var el = document.getElementById('element_id')!;

document.getElementById(s).getElementsByClassName(...)