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>
StrictNullChecks and getElementById
You can write:
var el = document.getElementById('element_id')!;
The ! means "trust me, this is not a null reference"
document.getElementById(s).document.getElements
ByClassName error in typescript
You don't need document
in the middle. The element returned by getElementById()
has its own getElementsByClassName()
method.
document.getElementById(s).getElementsByClassName(...)
Related Topics
Open File Explorer Window from JavaScript
How to Only Trigger Parent Click Event When a Child Is Clicked
Amount of All Goals of One Team (From Json)
Restrict to 2 Decimal Places in Keypress of a Text Box
Ag-Grid Cellrender With Button Click
How to Pass the Checked and Unchecked Value of Checkboxes in Component.Ts File in Angular
How to Find Middle Element of Array in JavaScript
Concatenate Json to a String in JavaScript
Image Taken from Camera Not Saved to Gallery
Onclick JavaScript to Make Browser Go Back to Previous Page
How to Get Date Value from One Date Input Field and Put It to Other Date Field Using JavaScript
How to Hide Div When You Scroll to Bottom and Show It Again When Scroll Up to Top
How to Remove Special Character from Json Without Parsing
How to Access Session Variables and Set Them in JavaScript
How to Remove Forward and Backward Slashes from String in JavaScript
How to Extract the User Name from an Email Address Using JavaScript