আপনাকে জানতে হবে পেজে দেখানো টেক্সট বা HTML কীভাবে পরিবর্তন করতে হয় আপনার সাইটগুলে আরও ইন্টারেক্টিভ बनाने জন্য। সেটাই হলো innerText এবং innerHTML HTML অ্যাট্রিবিউটগুলো।
এই অ্যাট্রিবিউটগুলো একটি DOM এলিমেন্টের টেক্সট এবং এর HTML কোড পরিবর্তন করা সহজ করে দেয়। এই গাইডে, আপনি শিখবেন JavaScript innerText এবং innerHTML অ্যাট্রিবিউট কীভাবে ব্যবহার করতে হয়।
JavaScript innerHTML কী?
JavaScript innerHTML প্রপার্টি একটি ওয়েব পেজে একটি এলিমেন্টের HTML কন্টেন্ট সেট করে। InnerHTML হল HTML DOM-এর একটি প্রপার্টি। innerHTML প্রায়শই <p> এলিমেন্টের কন্টেন্ট সেট এবং মডিফাই করার জন্য ব্যবহার হয়।
আপনি innerHTML এভাবে ব্যবহার করতে পারেন:
document.getElementById("paragraph").innerHTML = "Career Karma!";
এই লাইন কোড "paragraph" <p> এলিমেন্টের কন্টেন্টকে "Career Karma!"-এ সেট করে। getElementById() মেথড একটি এলিমেন্টকে এর ID দিয়ে রিট্রিভ করে।
ব্রাউজার একটি ডকুমেন্ট অবজেক্ট মডেল (DOM) ডিফাইন করে যখন একটি পেজ লোড হয়। এই DOM হল পেজে ডিসপ্লে হওয়া অবজেক্টগুলোর একটি সিরিজ।
DOM মানে আপনাকে HTML কোড পরিবর্তন করতে হয় না প্রতিবার আপনি একটি ওয়েব এলিমেন্ট পরিবর্তন করতে চাইলে। আপনি DOM এবং JavaScript ব্যবহার করে একটি পার্টিকুলার সেশনে পেজ কীভাবে দেখাবে তা পরিবর্তন করতে পারেন।
JavaScript innerText কী?
JavaScript innerText প্রপার্টি একটি এলিমেন্টের টেক্সট কন্টেন্ট সেট করে। এটি এর ডিসেন্ডেন্টসের কন্টেন্টও সেট করে। ডিসেন্ডেন্টস হতে পারে প্যারাগ্রাফের ভেতরে <span> ট্যাগ।
innerText-এর সিনট্যাক্স innerHTML-এর মতোই:
document.getElementById("element").innerText = "This is a test.";
এটি ID "element" वाले এলিমেন্টের টেক্সট ভ্যালুকে "This is a test."-এ সেট করে।
আপনি আপনার JavaScript কনসোলে গিয়ে একটি এলিমেন্ট সিলেক্ট করে এই মেথডগুলো টেস্ট করতে পারেন:
এটি একটি ওয়েব পেজে প্রথম <p> HTML ট্যাগের কন্টেন্ট পরিবর্তন করে। আপনি যদি টেক্সট রিপ্লেস করতে চান, তবে innerText অ্যাট্রিবিউট ব্যবহার করতে পারেন:
এটি পেজের সেকেন্ড প্যারাগ্রাফ (নাম্বার ১ দিয়ে ডিনোট করা) এর কন্টেন্টকে "This is a test"-এ পরিবর্তন করে।
JavaScript-এ innerHTML এবং innerText ব্যবহার করা
চলুন একটি ওয়েব পেজে টেক্সট পরিবর্তন করে শুরু করি। আমরা একটি সিম্পল ফ্ল্যাশকার্ড ওয়েব পেজ তৈরি করব। এই ওয়েব পেজ HTML সম্পর্কে একটি প্রশ্ন প্রদর্শন করবে। এতে একটি বাটন থাকবে যা ক্লিক করলে HTML সম্পর্কে প্রশ্নের উত্তর উজাগর হবে।
একটি ওয়েব পেজ তৈরি করা
আমাদের প্রথম ধাপ হলো আমাদের ফ্রন্ট-এন্ডের জন্য একটি index.html ফাইল তৈরি করা:
<!DOCTYPE html> <html> <head> <title>HTML Flashcard App</title> <link rel="stylesheet" href="./styles.css" /> </head> <body> <div class="flashcard"> <h2>Does a hyperlink only apply to text?</h2> <p>The answer will be revealed when you press "Show answer"</p> <button id="showAnswer">Show answer</button> <br /> <br /> <div id="showMessage"></div> </div> <script src="./scripts.js"></script> </body> </html>
এই পেজ তিনটি কম্পোনেন্টসহ একটি কন্টেইনার তৈরি করে। প্রথমে, আমাদের पास ইউজারকে জিজ্ঞেস করার জন্য প্রশ্নটি আছে। আমাদের কাছে উত্তর উজাগর করার বিষয়ে মেসেজ আছে। আমাদের পেজ শেষ হয় উত্তর উজাগর করার জন্য একটি বাটন দিয়ে।
আমাদের কোড আমাদের এলিমেন্টগুলোর টেক্সট কন্টেন্ট রিটার্ন করে:
আমরা আমাদের পেজকে সুন্দর बनाने জন্য একটি styles.css ফাইলে কিছু CSS স্টাইল অ্যাপ্লাই করব:
<style> .flashcard { margin: auto; width: 50%; padding: 50px; margin-top: 10%; background-color: lightgreen; text-align: center; } button { border: none; background-color: hotpink; padding: 10px; border-radius: 10px; } </style>
এখন আমাদের ওয়েব পেজে এক নজর দিই:
আমাদের সাইট কিছু একটা ফ্ল্যাশ কার্ডের মতো দেখাচ্ছে। আমরা আমাদের বাটন স্টাইল করেছি।
JavaScript innerHTML এবং innerText ব্যবহার করে টেক্সট পরিবর্তন করা
আমরা চাই বাটনে ক্লিক করলে প্রশ্নের উত্তর উজাগর হয়। প্রথমে, আমরা টেক্সট এবং বাটন এলিমেন্টগুলো সিলেক্ট করব যেগুলো আমরা আমাদের JavaScript কোডে ব্যবহার করব। আমরা সকল কোড আমাদের scripts.js ফাইলে লিখব:
var answerText = document.querySelector('p'); var button = document.querySelector('button');
এরপর, আমরা একটি JavaScript ফাংশন তৈরি করব। এই ফাংশন বাটনে ক্লিক করলে আমাদের প্রশ্নের উত্তর উজাগর করবে:
function showAnswer() { answerText.innerText = "No. Hyperlinks can be used on both text and images."; }
আমাদের ফাংশনকে বাটন প্রেসে এক্টিভেট করার জন্য, আমরা একটি সিম্পল ইভেন্ট লিসেনার তৈরি করব। এই লিসেনার আমাদের বাটনে ক্লিকের জন্য শোনবে:
button.addEventListener('click', showAnswer);
আমরা আমাদের ফ্ল্যাশ কার্ড অ্যাপ সেটআপ শেষ করেছি। আপনি যদি আমাদের ওয়েব পেজ দেখেন এবং "Show answer" বাটনে ক্লিক করেন, আমাদের প্যারাগ্রাফের টেক্সট পরিবর্তন হয়ে উত্তর উজাগর করবে:
আমরা JavaScript innerHTML ব্যবহার করে এই অ্যাপে আরও ফাংশন্যালিটি যোগ করতে পারি। ধরি আমরা চাই বাটনে ক্লিক করলে ফ্ল্যাশ কার্ডের নিচে একটি মেসেজ প্রদর্শন হয়। এই মেসেজ লাল কালারে হওয়া উচিত। আমরা নিচের কোড ব্যবহার করে এই মেসেজ তৈরি করতে পারি:
var message = document.querySelector('#showMessage'); function showAnswer() { answerText.innerText = "No. Hyperlinks can be used on both text and images."; message.innerHTML = "<span style='color:red;'>You have revealed the answer.</span>"; }
চলুন আমাদের রিভাইজড showAnswer() ফাংশন এবং আমাদের লেখা নতুন কোয়েরি সিলেক্টর দিয়ে কোডটি রান করি:
আমরা innerHTML মেথড ব্যবহার করে আমাদের সাইটে একটি HTML <span> ট্যাগ যোগ করেছি। এই ট্যাগ একটি মেসেজ প্রদর্শন করে যা ইউজার শো আন্সার বাটন প্রেস করলে লাল কালারে দেখাবে।
JavaScript innerText বনাম innerHTML
innerText এবং innerHTML প্রপার্টি দুটোই আপনাকে একটি ট্যাগের কন্টেন্ট অ্যাক্সেস এবং পরিবর্তন করতে দেয়। innerText কোনো ডিসেন্ডেন্ট বা স্পেসিং ছাড়া টেক্সট রিটার্ন করে। innerHTML যেকোনো ডিসেন্ডেন্ট এবং স্পেসিংসহ টেক্সট রিটার্ন করে।
আপনি innerText ব্যবহার করবেন যদি আপনি একটি এলিমেন্টের কন্টেন্ট প্লেইন টেক্সট হিসেবে দেখতে চান। innerHTML ব্যবহার করা বেশি উপযুক্ত যদি আপনি একটি স্ট্রিং-এ আপিয়ার হওয়া সকল HTML ট্যাগ দেখতে চান।
সংক্ষেপে, innerText আপনাকে প্লেইন টেক্সটের সাথে কাজ করতে দেয় যেখানে innerHTML আপনাকে একটি স্ট্রিং-এ HTML-এর সাথে কাজ করতে দেয়।
innerText এবং innerHTML উভয়েরই মডার্ন ব্রাউজারগুলে ওয়াইড সাপোর্ট আছে।
উপসংহার
innerText এবং innerHTML প্রপার্টিগুলো HTML DOM ম্যানিপুলেট করে। innerText একটি এলিমেন্টের টেক্সট কন্টেন্ট রিটার্ন করে স্পেসিং বা ডিসেন্ডেন্ট ছাড়া। innerHTML একটি এলিমেন্টের কন্টেন্ট এবং যেকোনো স্পেসিং ও ডিসেন্ডেন্ট রিটার্ন করে।
একটি বোনাস চ্যালেঞ্জ হিসেবে, দেখুন আপনি আমাদের উপরের কোডে বাটন দ্বিতীয়বার ক্লিক করলে উত্তর হাইড করতে পারেন কিনা। আপনার কোড должно:
- উত্তর হাইড করুন যখন ইউজার বাটনে ক্লিক করে
- বাটনের টেক্সট "Show answer" থেকে "Hide answer"-এ পরিবর্তন করুন যখন উত্তর দেখাচ্ছে
- "You have revealed the answer" মেসেজ রাখুন ইউজার "Hide answer" প্রেস করার পরও।
আপনি যদি আরও টিউটোরিয়াল খুঁজছেন যা আপনাকে JavaScript শিখতে সাহায্য করবে, আমাদের JavaScript বিগিনারদের জন্য বেস্ট টিউটোরিয়াল গাইড চেক আউট করুন।
