A guide on using getElementById function in TypeScript

How can I display the text let text: string inside a specific tag using typescript and getElementById?

Code for index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./index.js"></script>
</head>
<body>
    <h1>Typescript Exercise</h1>
    <p id="text">Text: </p>
</body>
</html>

Code for index.ts

let text: string = 'Typescript Exercise';
let textElement = document.getElementById("text") as HTMLElement | null

Answer №1

In order to update the text content of an element that may be null, it is necessary to first perform a conditional check to ensure its existence. Additionally, if you wish to add to the existing text content, you must also verify that there is text content present:

For more information, refer to Node.textContent - Web APIs | MDN

TS Playground

let text = 'TypeScript exercise';
let textEl = document.getElementById('text');
if (textEl?.textContent) textEl.textContent += text;
<h1>TypeScript exercise</h1>
<p id="text">Text: </p>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to fetch the Observable value

I have a function that returns an Observable<Person[]>, where Person is my model: export interface Person { id: string; age: number; } Now in my component.ts, I am calling this function and aiming to retrieve the array to display it in the HTML ...

What is the best way to hide the button when a user is viewing their own profile in an Angular application?

Each user has their own profile on the platform. A unique feature allows users to send messages by clicking a button when viewing other profiles. However, an issue arises where this messaging button also appears on a user's own profile. Is there a way ...

Strategies for incorporating a TypeScript-written Svelte library

UPDATE: The information in this question is no longer current. As of 12.8.2022, it is recommended to use the svelte-kit package available at . I developed a library (https://github.com/TeemuKoivisto/svelte-tree-view) that I imported as a Svelte component ...

Tips for including additional properties to a <button> element using ReactJS and Typescript

Currently, I am in the process of creating a unique component which consists of an ordinary <button> tag and has a new prop called aria-current. The issue at hand is that Typescript is flagging an error stating that this property does not exist with ...

How can I run a Redis Server on a port other than the default 6379 port using ioredis?

I recently came across this query regarding starting redis-server on a different port than the default 6379 in Ubuntu. I am currently trying to achieve the same using ioredis in my NestJS project, but unfortunately, it refuses to connect to any other port ...

Keeping the user logged in even after closing the app in an Ionic/Angular project: Best practices to retain user sessions

As a newcomer to angular/ionic, I have been given a project where the user needs to remain logged in even after closing the application unless they explicitly log out. Can anyone provide suggestions on how to modify the code below? login.page.ts import { ...

"Although TypeOrm successfully generates the database, there seems to be a connectivity issue

Attempting to set up a JWT authentication system using NestJs and SQLite. The code successfully generates the SQLite file, but then throws an error stating "Unable to connect to the database." Upon checking with the SQLite terminal, it became apparent that ...

What is the primary purpose of the index.d.ts file in Typescript?

There are some projects that include all types declarations within the index.d.ts file. This eliminates the need for programmers to explicitly import types from other files. import { TheType } from './somefile.ts' Is this the proper way to use ...

What is the best way to merge an array into a single object?

I have an array object structured like this. [ { "name": "name1", "type": "type1", "car": "car1", "speed": 1 }, { "name": &q ...

Having trouble with loading JavaScript during ng build --prod process

The JavaScript file I'm using for multiple emails (multiple_emails.js plugin) works well with ng serve. Here is my code: (function( $ ){ $.fn.multiple_emails = function(options) { // Default options var defaults = { ...

Tips for dynamically altering the bound variable in Angular

Most people understand the concept of interpolation and how to interpolate a single variable with ease. However, what if we need to dynamically switch between two different variables? Let's say we have two class properties: public first: string = &ap ...

Changing the name of an Angular2 import module

Deciding to improve readability, I opted to rename the @angular module to angular2 and gain a better understanding of how imports function. Prior to making this change, the systemjs.config.js appeared like so: (function(global) { var map = { ...

Try switching out the set timeout function within typescript for Wavesurfer.js

I recently wrote a function that changes the source for an audio file using wavesurfer.js and then plays the song with the newly loaded audio file. While my code is currently functioning as intended, I can't help but feel there might be a more efficie ...

How can we use tsyringe (a dependency injection library) to resolve classes with dependencies?

I seem to be struggling with understanding how TSyringe handles classes with dependencies. To illustrate my issue, I have created a simple example. In my index.tsx file, following the documentation, I import reflect-metadata. When injecting a singleton cl ...

Is it possible for TypeScript to automatically detect when an argument has been validated?

Currently, I am still in the process of learning Typescript and Javascript so please bear with me if I overlook something. The issue at hand is as follows: When calling this.defined(email), VSCode does not recognize that an error may occur if 'email ...

How can TypeScript be forced to output a specific data type?

I've created a generic "fetcher" function that is designed to handle different types of entities. However, I'm encountering an issue where TypeScript is inferring the return type based on all possible conditions within the function. Is there a w ...

Determine whether an element is visible following a state update using React Testing Library in a Next.js application

I'm looking to test a NextJS component of mine, specifically a searchbar that includes a div which should only display if the "search" state is not empty. const SearchBar = () => { const [search, setSearch] = useState(""); const handleSear ...

Utilizing Interface Merging: Determining the Appropriate Instance Type for Field Types

I am in need of writing a definition file for an external library. I have augmented a class using interface merging and there are situations where a field of the library class is of the same type as the instance itself. Here is a snippet of demo code: // ...

Obtaining the attribute value from a custom tag in Angular: A comprehensive guide

I am currently working on creating a customized password component in Angular5. I am having difficulty obtaining the minimum and maximum attribute values required to validate the password. I attempted to retrieve the values using JavaScript's getAttr ...

Ways to set the className prop for all components automatically without having to specify it repeatedly

One challenge I face is dealing with code duplication whenever I create a new component. Is there a way to pass the className property between components without having to explicitly define it every time a new component is created? For example, when I cr ...