কম্পিউটার টিউটোরিয়াল

জাভাস্ক্রিপ্ট দিয়ে টেক্সট টগল করা


জাভাস্ক্রিপ্ট ব্যবহার করে টেক্সট টগল করার কোড নিচে দেওয়া হলো −

উদাহরণ

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .textDiv {       font-size: 20px;       background-color: rgb(199, 228, 157);       width: 100%;       padding: 15px;       font-weight: bold;    }    .toggleBtn {       padding: 15px;       border: none;       background-color: rgb(106, 41, 153);       color: white;       font-size: 18px;    } </style> </head> <body> <h1>টগল টেক্সট উদাহরণ</h1> <button class="toggleBtn">এই বাটনে ক্লিক করুন</button> <h2>উপরের বাটনে ক্লিক করলে নিচের টেক্সট টগল হবে</h2> <div class="textDiv">Old Text</div> <script>    document .querySelector(".toggleBtn") .addEventListener("click", toggleText);    function toggleText() {       var x = document.querySelector(".textDiv");       if (x.innerHTML === "Old Text") {          x.innerHTML = "New Text";       } else {          x.innerHTML = "Old Text";       }    } </script> </body> </html>

আউটপুট

উপরের কোড নিচের আউটপুট দেবে −

জাভাস্ক্রিপ্ট দিয়ে টেক্সট টগল করা

“এই বাটনে ক্লিক করুন” বাটনে ক্লিক করলে −

জাভাস্ক্রিপ্ট দিয়ে টেক্সট টগল করা


  1. জাভাস্ক্রিপ্টে অটোকমপ্লিট (Autocomplete) তৈরি করা

  2. জাভাস্ক্রিপ্টে পাসওয়ার্ড ভিজিবিলিটি টগল (Show/Hide Password)

  3. জাভাস্ক্রিপ্ট দিয়ে এলিমেন্ট লুকানো/দেখানো টগল করা

  4. জাভাস্ক্রিপ্টে <strong> ট্যাগে টেক্সট সেট করা