diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md index d91bc20c6..05e1df0c2 100644 --- a/src/content/reference/react-dom/client/createRoot.md +++ b/src/content/reference/react-dom/client/createRoot.md @@ -4,7 +4,7 @@ title: createRoot -`createRoot` lets you create a root to display React components inside a browser DOM node. +একটি ব্রাউজার DOM নোডে React কম্পোনেন্ট দেখানোর জন্য `createRoot` আপনাকে একটি root তৈরী করতে দেবে। ```js const root = createRoot(domNode, options?) @@ -16,11 +16,11 @@ const root = createRoot(domNode, options?) --- -## Reference {/*reference*/} +## রেফারেন্স {/*reference*/} ### `createRoot(domNode, options?)` {/*createroot*/} -Call `createRoot` to create a React root for displaying content inside a browser DOM element. +একটি ব্রাউজার DOM এলিমেন্টে React কম্পোনেন্ট দেখানোর স্বার্থে একটি React root তৈরী করার জন্য `createRoot` কল করুন। ```js import { createRoot } from 'react-dom/client'; @@ -29,104 +29,104 @@ const domNode = document.getElementById('root'); const root = createRoot(domNode); ``` -React will create a root for the `domNode`, and take over managing the DOM inside it. After you've created a root, you need to call [`root.render`](#root-render) to display a React component inside of it: +React `domNode` এর জন্য একটি root তৈরী করবে, এবং এর মধ্যকার DOM পরিচালনার দায়িত্ব নিয়ে নিবে। root তৈরী করবার পর আপনাকে এর মধ্যে একটি React কম্পোনেন্ট দেখাবার জন্য [`root.render`](#root-render) কল করতে হবেঃ ```js root.render(); ``` -An app fully built with React will usually only have one `createRoot` call for its root component. A page that uses "sprinkles" of React for parts of the page may have as many separate roots as needed. +সম্পূর্ণরূপে React দিয়ে বানানো একটি অ্যাপে সাধারণত একটি মাত্র `createRoot` কল থাকবে এর root কম্পোনেন্টের জন্য। যেই পেইজের বিভিন্ন অংশের জন্য React এর "ছিটেফোটা" ব্যবহৃত হয় সেগুলোতে যত গুলো ইচ্ছে আলাদা আলাদা root থাকতে পারে। -[See more examples below.](#usage) +[নিচে আরো উদাহরণ দেখ...](#usage) -#### Parameters {/*parameters*/} +#### প্যারামিটার {/*parameters*/} -* `domNode`: A [DOM element.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React will create a root for this DOM element and allow you to call functions on the root, such as `render` to display rendered React content. +* `domNode`: একটা [DOM এলিমেন্ট।](https://developer.mozilla.org/en-US/docs/Web/API/Element) React এই DOM এলিমেন্টের জন্য একটি root তৈরী করবে এবং root এ আপনাকে ফাংশন কল করতে দেবে, যেমন হতে পারে রেন্ডার হওয়া React কম্পোনেন্ট দেখানোর জন্য ফাংশন `render`। -* **optional** `options`: An object with options for this React root. +* **optional** `options`: এই React root এর জন্য বিভিন্ন option সংবলিত একটি অবজেক্ট। - * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. - * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. + * **optional** `onRecoverableError`: যখন React স্বয়ংক্রিয় ভাবে কোন error থেকে নিজেকে recover করে তখন হওয়া কলব্যাক। + * **optional** `identifierPrefix`: [`useId`](/reference/react/useId) দিয়ে তৈরী হওয়া ID গুলোর জন্য React যে string prefix ব্যবহার করে। একই পেইজে যখন একাধিক rot থাকে তখন conflict এড়াতে এটা কাজে লাগে। -#### Returns {/*returns*/} +#### রিটার্ন {/*returns*/} -`createRoot` returns an object with two methods: [`render`](#root-render) and [`unmount`.](#root-unmount) +`createRoot` দুটি মেথডসহ একটি অব্জেক্ট রিটার্ন করেঃ [`render`](#root-render) এবং [`unmount`.](#root-unmount) -#### Caveats {/*caveats*/} -* If your app is server-rendered, using `createRoot()` is not supported. Use [`hydrateRoot()`](/reference/react-dom/client/hydrateRoot) instead. -* You'll likely have only one `createRoot` call in your app. If you use a framework, it might do this call for you. -* When you want to render a piece of JSX in a different part of the DOM tree that isn't a child of your component (for example, a modal or a tooltip), use [`createPortal`](/reference/react-dom/createPortal) instead of `createRoot`. +#### যেসব বিষয়ে সতর্ক থাকতে হবে {/*caveats*/} +* আপনার অ্যাপ যদি সার্ভার থেকে রেন্ডার হয়, `createRoot()` কাজ করবে না। বরং [`hydrateRoot()`](/reference/react-dom/client/hydrateRoot) ব্যব্যহার করুন। +* খুব সম্ভবত আপনার অ্যাপে একটি মাত্র `createRoot` কল থাকবে। আপনি যদি একটি ফ্রেমওয়ার্ক ব্যবহার করেন, সম্ভবতঃ সে-ই আপনার হয়ে কলটি করে দিবে। +* যখন আপনি DOM ট্রি-এর অন্য একটি অংশে যা আপনার কম্পোনেন্টের চাইল্ড না(উদাহরণস্বরূপ একটা মোডাল বা টুলটিপ), JSX রেন্ডার করতে চাইবেন তখন `createRoot` এর বদলে [`createPortal`](/reference/react-dom/createPortal) ব্যবহার করুন। --- ### `root.render(reactNode)` {/*root-render*/} -Call `root.render` to display a piece of [JSX](/learn/writing-markup-with-jsx) ("React node") into the React root's browser DOM node. +React root-এর ব্রাউজার DOM নোডে কোন [JSX](/learn/writing-markup-with-jsx) ("React node") দেখানোর জন্য `root.render` কল করুন। ```js root.render(); ``` -React will display `` in the `root`, and take over managing the DOM inside it. +React `root`-এ `` দেখাবে, এবং এর মধ্যকার DOM পরিচালনার দায়িত্ব নিয়ে নিবে। -[See more examples below.](#usage) +[নিচে আরো উদাহরণ দেখুন।](#usage) -#### Parameters {/*root-render-parameters*/} +#### প্যারামিটার {/*root-render-parameters*/} -* `reactNode`: A *React node* that you want to display. This will usually be a piece of JSX like ``, but you can also pass a React element constructed with [`createElement()`](/reference/react/createElement), a string, a number, `null`, or `undefined`. +* `reactNode`: আপনি দেখাতে চান এমন একটি *React নোড*। এটা সাধারণত `` এর মত এক টুকরো JSX হবে।, কিন্তু আপনি [`createElement()`](/reference/react/createElement) দিয়ে তৈরী করা একটি React এলিমেন্ট, একটি স্ট্রিং, একটি সংখ্যা, `null` বা `undefined` ও পাস করতে পারেন। -#### Returns {/*root-render-returns*/} +#### রিটার্ন {/*root-render-returns*/} -`root.render` returns `undefined`. +`root.render` রিটার্ন করে `undefined`. -#### Caveats {/*root-render-caveats*/} +#### সতর্কতা {/*root-render-caveats*/} -* The first time you call `root.render`, React will clear all the existing HTML content inside the React root before rendering the React component into it. +* আপনি যখন প্রথম বারের মত `root.render` কল করবেন, React এর রুটের ভিতরে কম্পোনেন্ট রেন্ডার করবার আগে থাকা সব HTML কনটেন্ট মুছে ফেলবে। -* If your root's DOM node contains HTML generated by React on the server or during the build, use [`hydrateRoot()`](/reference/react-dom/client/hydrateRoot) instead, which attaches the event handlers to the existing HTML. +* যদি আপনার রুটের DOM নোডে এমন HTML থাকে যা React সার্ভারে তৈরি করেছে বা বিল্ডের সময় তৈরি করেছে, তাহলে বরং [`hydrateRoot()`](/reference/react-dom/client/hydrateRoot) ব্যবহার করুন, যা বিদ্যমান HTML এ ইভেন্ট হ্যান্ডলারগুলো যুক্ত করে দেয়। -* If you call `render` on the same root more than once, React will update the DOM as necessary to reflect the latest JSX you passed. React will decide which parts of the DOM can be reused and which need to be recreated by ["matching it up"](/learn/preserving-and-resetting-state) with the previously rendered tree. Calling `render` on the same root again is similar to calling the [`set` function](/reference/react/useState#setstate) on the root component: React avoids unnecessary DOM updates. +* আপনি যদি একি রুটে একাধিকবার `render` কল করেন, তাহলে আপনার পাঠানো সর্বশেষ JSX দেখানোর খাতিরে React প্রয়োজনমত DOM আপডেট করে ফেলবে। React আগেরবার রেন্ডার হওয়া ট্রি এর সাথে ["মিলিয়ে দেখবে"](/learn/preserving-and-resetting-state) এবং সিদ্ধান্ত নিবে DOM এর কোণ অংশগুলো পুনর্ব্যবহার করা যায় আর কোনগুলো আবার বানাতে হবে। একই রুটে আবার `render` কল করা রুট কম্পোনেন্টে [`set` function](/reference/react/useState#setstate) কল করার মতঃ React অপ্রয়োজনীয় DOM আপডেট এড়ানোর চেষ্টা করে। --- ### `root.unmount()` {/*root-unmount*/} -Call `root.unmount` to destroy a rendered tree inside a React root. +React রুটের মধ্যে রেন্ডার হওয়া একটি ট্রি মুছে ফেলতে `root.unmount` কল করুন। ```js root.unmount(); ``` -An app fully built with React will usually not have any calls to `root.unmount`. +সম্পূর্ণরূপে React দিয়ে বানানো অ্যাপের সাধারণত `root.unmount` এ কোন কল থাকে না। -This is mostly useful if your React root's DOM node (or any of its ancestors) may get removed from the DOM by some other code. For example, imagine a jQuery tab panel that removes inactive tabs from the DOM. If a tab gets removed, everything inside it (including the React roots inside) would get removed from the DOM as well. In that case, you need to tell React to "stop" managing the removed root's content by calling `root.unmount`. Otherwise, the components inside the removed root won't know to clean up and free up global resources like subscriptions. +এটা সে ক্ষেত্রে সবচেয়ে কাজে লাগে যদি অন্য কোন কোডের কারণে DOM থেকে আপনার React রুটের DOM নোড (বা ট্রিতে এর কোন পূর্বসূরী) মুছে যায়। উদাহরণস্বরূপ, ধরেন একটা jQuery ট্যাব প্যানেল আছে যা DOM থেকে অচল ট্যাবগুলোকে ফেলে দেয়। যদি একটা ট্যাব ফেলে দেওয়া হয়, তাহলে এই ট্যাবের মধ্যে থাকা যাবতীয় সব কিছু(ভিতরকার React রুটগুলো সহ) DOM থেকে মুছে যায়। সেক্ষেত্রে, `root.unmount` কল করার মাধ্যমে আপনার React কে বলতে হবে মুছে যাওয়া রুটের কনটেন্ট ম্যানেজ করা "বন্ধ" করতে। না হলে, মুছে যাওয়া রুটের ভেতরকার কম্পোনেন্ট সাবস্ক্রিপশনের মত global resource মুছবে না এবং সেগুলো ফ্রি হবে না। -Calling `root.unmount` will unmount all the components in the root and "detach" React from the root DOM node, including removing any event handlers or state in the tree. +`root.unmount` কল করলে রুটের সব কম্পোনেন্ট আনমাউন্ট হবে এবং রুট DOM নোড থেকে React "detach" হয়ে যাবে। একই সাথে ট্রিতে কোন ইভেন্ট হ্যান্ডলার বা স্টেট থাকলে সেটাও মুছে যাবে। -#### Parameters {/*root-unmount-parameters*/} +#### প্যারামিটার {/*root-unmount-parameters*/} -`root.unmount` does not accept any parameters. +`root.unmount` কোন প্যারামিটার গ্রহণ করে না। -#### Returns {/*root-unmount-returns*/} +#### রিটার্ন {/*root-unmount-returns*/} -`root.unmount` returns `undefined`. +`root.unmount` `undefined` রিটার্ন করে। -#### Caveats {/*root-unmount-caveats*/} +#### সতর্কতা {/*root-unmount-caveats*/} -* Calling `root.unmount` will unmount all the components in the tree and "detach" React from the root DOM node. +* `root.unmount` কল করলে ট্রি-এর সকল কম্পোনেন্ট আনমাউন্ট হবে এবং React কে রুট DOM নোড থেকে "বিচ্ছিন" করবে। -* Once you call `root.unmount` you cannot call `root.render` again on the same root. Attempting to call `root.render` on an unmounted root will throw a "Cannot update an unmounted root" error. However, you can create a new root for the same DOM node after the previous root for that node has been unmounted. +* একবার `root.unmount` কল করা হলে একই রুটে `root.render` আর কল করা যাবে না। আনমাউন্ট করা রুটে `root.render` কলের চেষ্টা করা হলে "Cannot update an unmounted root" এরর দেখাবে। যদিও, আপনি একই DOM নোডে নতুন রুট তৈরী করতে পারেন যখন সেই নোডে আগের রুট আনমাউন্ট করা হয়ে গেছে। --- -## Usage {/*usage*/} +## ব্যবহার {/*usage*/} -### Rendering an app fully built with React {/*rendering-an-app-fully-built-with-react*/} +### সম্পূর্ণরূপে React দিয়ে তৈরি অ্যাপের রেন্ডারিং {/*rendering-an-app-fully-built-with-react*/} -If your app is fully built with React, create a single root for your entire app. +যদি আপনার অ্যাপটি সম্পূর্ণরূপে React দিয়ে বানানো হয়ে থাকে, তবে পুরো অ্যাপের জন্য একটি মাত্র রুট তৈরি করুন। ```js [[1, 3, "document.getElementById('root')"], [2, 4, ""]] import { createRoot } from 'react-dom/client'; @@ -135,10 +135,10 @@ const root = createRoot(document.getElementById('root')); root.render(); ``` -Usually, you only need to run this code once at startup. It will: +সাধারণত, আপনাকে একবারই শুরুতে এই কোড রান করতে হবে। এটা যা করবে তা হলঃ -1. Find the browser DOM node defined in your HTML. -2. Display the React component for your app inside. +1. আপনার HTML এ ডিফাইন্ড হওয়া ব্রাউজার DOM নোড খুঁজে বের করবে। +2. আপনার অ্যাপের ভেতর থাকা React কম্পোনেন্ট দেখাবে। @@ -147,7 +147,7 @@ Usually, you only need to run this code once at startup. It will: My app - +
@@ -186,35 +186,35 @@ function Counter() { -**If your app is fully built with React, you shouldn't need to create any more roots, or to call [`root.render`](#root-render) again.** +**যদি আপনার অ্যাপটি সম্পূর্ণরূপে React দিয়ে বানানো হয়ে থাকে, আপনার আর কোন রুট তৈরির বা আবার [`root.render`](#root-render) কল করার প্রয়োজন হবার কথা না** -From this point on, React will manage the DOM of your entire app. To add more components, [nest them inside the `App` component.](/learn/importing-and-exporting-components) When you need to update the UI, each of your components can do this by [using state.](/reference/react/useState) When you need to display extra content like a modal or a tooltip outside the DOM node, [render it with a portal.](/reference/react-dom/createPortal) +এর পর থেকে, React আপনার পুরো অ্যাপের DOM পরিচালনা করবে। আরো কম্পোনেন্ট যুক্ত করবার জন্য [`App` কম্পোনেন্টে তাদের nest করুন।](/learn/importing-and-exporting-components) যখন আপনার UI আপডেটের প্রয়োজন হবে, আপনার প্রতিটি কম্পোনেন্ট [স্টেট ব্যবহার করে](/reference/react/useState) সেটা করতে পারবে। যখন আপনার DOM নোডের বাইরে অতিরিক্ত কোন কনটেন্ট যেমন একটা মোডাল বা টুলটিপ দেখানোর প্রয়োজন হবে তখন, [একটা পোর্টাল ব্যবহার করে সেটা রেন্ডার করুন।](/reference/react-dom/createPortal) -When your HTML is empty, the user sees a blank page until the app's JavaScript code loads and runs: +যখন আপনার HTML খালি থাকে, যতক্ষণ পর্যন্ত জাভাস্ক্রিপ্ট লোড এবং রান না হয়, ততক্ষণ ব্যবহারকারী একটা খালি পেইজ দেখবে। ```html
``` -This can feel very slow! To solve this, you can generate the initial HTML from your components [on the server or during the build.](/reference/react-dom/server) Then your visitors can read text, see images, and click links before any of the JavaScript code loads. We recommend [using a framework](/learn/start-a-new-react-project#production-grade-react-frameworks) that does this optimization out of the box. Depending on when it runs, this is called *server-side rendering (SSR)* or *static site generation (SSG).* +বিষয়টা খুব ধীর রকম অনুভূত হতে পারে! এটা সমাধানের জন্য, আপনি [বিল্ডের সময় বা সার্ভারে](/reference/react-dom/server) আপনার কম্পোনেন্ট গুলো থেকে প্রাথমিক HTML তৈরি করে ফেলতে পারেন। এর পরে আপনার ভিজিটররা জাভাস্ক্রিপ্ট লোড হবার আগেই টেক্সট পড়তে, ছবি দেখতে এবং লিঙ্ক ক্লিক করতে পারবে। আমাদের উপদেশ থাকবে যে আপনি এর জন্য একটা [ফ্রেমওয়ার্ক ব্যবহার করুন](/learn/start-a-new-react-project#production-grade-react-frameworks) যা নিজেই এই অপটিমাইজেশনটুকু করে দেবে। কখন এটা রান করছে তার উপর নির্ভর করে একে বলা হয়, *server-side rendering (SSR)* অথবা *static site generation (SSG)।* -**Apps using server rendering or static generation must call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) instead of `createRoot`.** React will then *hydrate* (reuse) the DOM nodes from your HTML instead of destroying and re-creating them. +**যেসব অ্যাপ server rendering বা static generation ব্যবহার করে তাদেরকে অবশ্যই `createRoot` এর জায়গায় [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) কল করতে হবে।** React তখন আপনার HTML থেকে DOM নোডগুলো ধ্বংস এবং পুনরায় তৈরি করার বদলে *hydrate* (পুনর্ব্যবহার) করবে। --- -### Rendering a page partially built with React {/*rendering-a-page-partially-built-with-react*/} +### React দিয়ে আংশিকভাবে বানানো পেইজের রেন্ডারিং {/*rendering-a-page-partially-built-with-react*/} -If your page [isn't fully built with React](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page), you can call `createRoot` multiple times to create a root for each top-level piece of UI managed by React. You can display different content in each root by calling [`root.render`.](#root-render) +যদি আপনার পেইজ [সম্পূর্ণরূপে React দিয়ে বানানো না হয়ে থাকে](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page), React দিয়ে পরিচালিত প্রতিটি উচ্চ স্তরের UI piece এর জন্য একটি রুট তৈরি করার খাতিরে আপনি একাধিকবার `createRoot` কল করতে পারেন। আপনি [`root.render`](#root-render) কল করার মাধ্যমে প্রতিটি রুটে ভিন্ন ভিন্ন কনটেন্ট দেখাতে পারেন। -Here, two different React components are rendered into two DOM nodes defined in the `index.html` file: +এখানে, দুটি ভিন্ন React কম্পোনেন্ট `index.html` এর দুটি DOM নোডে রেন্ডার হচ্ছেঃ @@ -288,28 +288,28 @@ nav ul li { display: inline-block; margin-right: 20px; } -You could also create a new DOM node with [`document.createElement()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) and add it to the document manually. +আপনি [`document.createElement()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) ব্যবহার করে একটা নতুন DOM নোড তৈরীও করতে পারেন এবং একে নিজে নিজে ডকুমেন্টে যোগ করতে পারেন। ```js const domNode = document.createElement('div'); const root = createRoot(domNode); root.render(); -document.body.appendChild(domNode); // You can add it anywhere in the document +document.body.appendChild(domNode); // আপনি ডকুমেন্টের যেকোন জায়গায় এটা যোগ করতে পারেন ``` -To remove the React tree from the DOM node and clean up all the resources used by it, call [`root.unmount`.](#root-unmount) +DOM নোড থেকে React ট্রি সরাতে এবং এর ব্যবহৃত সকল রিসোর্স মুছে ফেলতে [`root.unmount`](#root-unmount) কল করুন। ```js root.unmount(); ``` -This is mostly useful if your React components are inside an app written in a different framework. +এইটা সাধারণত সবচেয়ে কাজে লাগে যদি অ্যাপের ভিতরে থাকা আপনার React কম্পোনেন্টগুলো ভিন্ন কোন ফ্রেমওয়ার্কে লেখা থাকে। --- -### Updating a root component {/*updating-a-root-component*/} +### একটি রুট কম্পোনেন্ট আপডেট করা {/*updating-a-root-component*/} -You can call `render` more than once on the same root. As long as the component tree structure matches up with what was previously rendered, React will [preserve the state.](/learn/preserving-and-resetting-state) Notice how you can type in the input, which means that the updates from repeated `render` calls every second in this example are not destructive: +আপনি একই রুটে একাধিকবার `render` কল করতে পারেন। যতক্ষণ পর্যন্ত আগে থেকে রেন্ডার হওয়া অবস্থার সাথে কম্পোনেন্ট ট্রি এর গঠনবিন্যাস মিলে যাচ্ছজে, React [state সংরক্ষণ করবে।](/learn/preserving-and-resetting-state) খেয়াল করুন যে আপনি ইনপুটে টাইপ করতে পারছেন, যার অর্থ প্রতি সেকেন্ডে পুনারবৃত্ত হওয়া `render` কল ধ্বংসাত্মক নয়ঃ @@ -340,14 +340,14 @@ export default function App({counter}) { -It is uncommon to call `render` multiple times. Usually, your components will [update state](/reference/react/useState) instead. +সাধারণত `render` একাধিকবার কল করা হয় না, বরং আপনার কম্পোনেট গুলোই [state আপডেট](/reference/react/useState) করে। --- -## Troubleshooting {/*troubleshooting*/} +## ট্রাবলশ্যুট {/*troubleshooting*/} -### I've created a root, but nothing is displayed {/*ive-created-a-root-but-nothing-is-displayed*/} +### একটা রুট তৈরী করবার পরও কিছুই দেখাচ্ছে না {/*ive-created-a-root-but-nothing-is-displayed*/} -Make sure you haven't forgotten to actually *render* your app into the root: +নিশ্চিত করুন যে আপনি আসলেই রুটে আপনার অ্যাপ *রেন্ডার* করতে ভুলে যাননি। ```js {5} import { createRoot } from 'react-dom/client'; @@ -357,15 +357,15 @@ const root = createRoot(document.getElementById('root')); root.render(); ``` -Until you do that, nothing is displayed. +আপনি এটা করার আগ পর্যন্ত কিছুই দেখা যাবে না। --- -### I'm getting an error: "Target container is not a DOM element" {/*im-getting-an-error-target-container-is-not-a-dom-element*/} +### একটা এরর দেখাচ্ছেঃ "Target container is not a DOM element" {/*im-getting-an-error-target-container-is-not-a-dom-element*/} -This error means that whatever you're passing to `createRoot` is not a DOM node. +এই এররের অর্থ হল, আপনি যা `createRoot`-এ পাঠাচ্ছেন তা DOM নোড না। -If you're not sure what's happening, try logging it: +আপনি যদি নিশ্চিত না হন যে কি হচ্ছে, একে logging করার চেষ্টা করুনঃ ```js {2} const domNode = document.getElementById('root'); @@ -374,46 +374,46 @@ const root = createRoot(domNode); root.render(); ``` -For example, if `domNode` is `null`, it means that [`getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) returned `null`. This will happen if there is no node in the document with the given ID at the time of your call. There may be a few reasons for it: +উদাহরণস্বরূপ, যদি `domNode` `null` হয়, এর অর্থ [`getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)`null` রিটার্ন করেছে। এটা হবে যদি আপনার কল করার সময়ে ডকুমেন্টে ওই ID এর কোন নোড না থাকে। এর কিছু কারণ হতে পারে এমনঃ -1. The ID you're looking for might differ from the ID you used in the HTML file. Check for typos! -2. Your bundle's `