Share
Facebook
Twitter
LinkedIn
Whatsapp
Instagram
Messenger

জাভাস্ক্রিপ্ট innerText প্রোপার্টি


" innerText " প্রোপার্টি হল একটি DOM (Document Object Model) প্রোপার্টি যা একটি HTML উপাদানের (element) অভ্যন্তরীণ পাঠ্য (text) ধারণ করে এবং সেটি পরিবর্তন করতে ব্যবহৃত হয়। এটি সাধারণত একটি HTML ট্যাগের মধ্যে থাকা পাঠ্যকে পরিচালনা করার জন্য ব্যবহৃত হয়।


innerText কি?

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 ট্যাগের সাথে উদাহরণ

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 প্রোপার্টি দুটি পঠনযোগ্য টেক্সট প্রদান করে, তবে তাদের মধ্যে কিছু পার্থক্য রয়েছে। নিচে এই পার্থক্য গুলো দেকুন।

আকানে নিচে একটি উদাহরণ দেকুন, যেকানে 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 এর কিচু সীমাবদ্ধতা এবং সমস্যা রয়েচে, নিচে এগুলো দেকুন।