" innerText " প্রোপার্টি হল একটি DOM (Document Object Model) প্রোপার্টি যা একটি HTML উপাদানের (element) অভ্যন্তরীণ পাঠ্য (text) ধারণ করে এবং সেটি পরিবর্তন করতে ব্যবহৃত হয়। এটি সাধারণত একটি HTML ট্যাগের মধ্যে থাকা পাঠ্যকে পরিচালনা করার জন্য ব্যবহৃত হয়।
innerText একটি প্রোপার্টি যা একটি HTML উপাদানের ভিতরের পাঠ্য উপস্থাপন করে। এটি একটি নির্দিষ্ট HTML উপাদানে থাকা পাঠ্য ডেটাকে পড়তে এবং পরিবর্তন করতে ব্যবহৃত হয়।
innerText এর বৈশিষ্ট্যসমূহ
innerText প্রোপার্টির মাধ্যমে একটি HTML উপাদানের পাঠ্য পরিবর্তন বা অ্যাক্সেস করা যেতে পারে। নিচে এর একটি উদাহরণ দেকুন।
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>InnerText Example</title> </head> <body> <div id="example">Hello, World!</div> <button onclick="changeText()">Change Text</button> <script> function changeText() { // 'example' ID যুক্ত div এর innerText পরিবর্তন করা হচ্ছে document.getElementById('example').innerText = 'Text has been changed!'; } </script> </body> </html>
এই উদাহরণে, একটি div ট্যাগের মধ্যে থাকা পাঠ্য Hello, World! এবং একটি বোতাম ব্যবহার করে পাঠ্য পরিবর্তন করা হয়।
HTML ট্যাগের সাথে সাধারণ টেক্সট এর একটি উদাহরণ দেকুন।
This is a paragraph.
একাধিক HTML ট্যাগ বাবয়ার করে একটি উদাহরণ দেকুন নিচে।
<div id="container"> <h1>Title</h1> <p>This is a paragraph inside a div.</p> </div> <script> const container = document.getElementById('container'); container.innerText = 'This is new content for the entire container.'; </script>
আকানে নিচে স্টাইলিং এবং লুকানো টেক্সট এর একটি উদাহরণ দেকুন।
<div id="styled-content"> <span style="display:none;">Hidden Text</span> <span>Visible Text</span> </div> <script> const content = document.getElementById('styled-content'); console.log(content.innerText); // Output: Visible Text </script>
innerText এবং textContent প্রোপার্টি দুটি পঠনযোগ্য টেক্সট প্রদান করে, তবে তাদের মধ্যে কিছু পার্থক্য রয়েছে। নিচে এই পার্থক্য গুলো দেকুন।
আকানে নিচে একটি উদাহরণ দেকুন, যেকানে innerText এবং textContent বাবয়ার করা অয়েচে।
<div id="example"> <span style="display:none;">Hidden</span> Visible </div> <script> const example = document.getElementById('example'); console.log('innerText: ', example.innerText); // Output: Visible console.log('textContent: ', example.textContent); // Output: HiddenVisible </script>
একানে আমরা একটি বাবারিক উদাওরন দেকি, যেকানে ফর্ম ইনপুট দ্বারা ডায়নামিক কনটেন্ট আপডেট করা অয়েচে। ধরি আমাদের একটি ফর্ম আছে যেখানে ব্যবহারকারী তার নাম প্রবেশ করাচ্ছে এবং নামের ভিত্তিতে একটি স্বাগতম বার্তা প্রদর্শন করা হচ্ছে। innerText ব্যবহার করে এটি কীভাবে কাজ করবে তা দেখা যাক।
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dynamic Greeting Example</title> </head> <body> <form id="greetingForm"> <label for="name">Enter your name:</label> <input type="text" id="name" name="name"> <button type="button" onclick="updateGreeting()">Greet Me</button> </form> <h1 id="greetingMessage"></h1> <script> function updateGreeting() { const name = document.getElementById('name').value; const message = document.getElementById('greetingMessage'); message.innerText = `Hello, ${name}! Welcome to our website.`; } </script> </body> </html>
এই উদাহরণে, ব্যবহারকারী তার নাম প্রদান করার পর একটি কাস্টমাইজড স্বাগতম বার্তা দেখানো হয়।
ধরি আমাদের একটি তালিকা রয়েছে এবং আমরা প্রতিটি আইটেমের জন্য কিছু তথ্য প্রদর্শন করতে চাই। innerText ব্যবহার করে কীভাবে এটি করা যাবে।
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>List Display Example</title> </head> <body> <ul id="itemList"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <button onclick="updateList()">Update List</button> <script> function updateList() { const items = document.querySelectorAll('#itemList li'); items.forEach((item, index) => { item.innerText = `Updated Item ${index + 1}`; }); } </script> </body> </html>
এই উদাহরণে, একটি বোতাম ক্লিক করার মাধ্যমে তালিকার সমস্ত আইটেম আপডেট করা হয়।
জাভাস্ক্রিপ্ট innerText এর কিচু সীমাবদ্ধতা এবং সমস্যা রয়েচে, নিচে এগুলো দেকুন।