জাভাস্ক্রিপ্ট ইনার এইচটিএমএল(JavaScript innerHTML Tutorial in Bangla)
ইনার এইচটিএমএল (innerHTML) প্রোপার্টি দিয়ে ডকুমেন্টের কোন এলিমেন্টের (যেমন div বা p ইত্যাদি) ভিতরের সব কনটেন্ট নিয়ে আসা যায়। পেজ রিলোড করা ছাড়াই এই নিয়ে আসা কনটেন্ট পরিবর্তন করা যায় এমনকি ইউজারের কাছে ইনপুট নিয়ে সেই অনুযায়ী পরিবর্তন করতে পারেন। getElementById() মেথডের সাথে এই প্রোপার্টি খুব ব্যবহার করা হয়। যেমন
01.<!DOCTYPE html>02.<html>03.<head>04.<script>05.function showNumber(){06.document.getElementById('show').innerHTML = '01961349181';07.}08.function showEmail(){09.document.getElementById('show').innerHTML = 'refatju AT yahoo DOT com';10.}11.</script>12.</head>13.<body>14. 15.<input type="button" onclick="showNumber()" value="Show Mobile Number" />16.<input type="button" onclick="showEmail()" value="Show Email" />17.<h3 id="show"></h3>18. 19.</body>20.</html>** showNumber() এবং showEmail() দুটি ফাংশন তৈরী করে দুটি বাটনে onclick এ কল করেছি। আর এই ফাংশনগুলিতে getElementById() দিয়ে "show" আইডিধারী ফাকা এলিমেন্টের ভিতর নিজের প্রয়োজনীয় কনটেন্ট ঢুকিয়ে দিয়েছি। একটিতে মোবাইল নম্বর এবং অপরটিতে ইমেইল। document.getElementById('show').innerHTML এভাবে দেয়াতে "show" আইডিধারী ফাকা এলিমেন্টের ভিতর যেকোন কনটেন্ট ঢুকানোর ক্ষেত্র তৈরী হয়েছে। যেকোন এলিমেন্টের আইডি ধরে এভাবে তার ভিতরের কনটেন্ট পরিবর্তন করতে পারেন।
** যে এলিমেন্টের ভিতরের কনটেন্ট পরিবর্তন করবেন সেটা এভাবে document.getElementById('show').innerHTML ধরার পর সমান চিহ্ন দিয়ে কাংখিত কনটেন্ট দিয়ে দিবেন।
ইউজারের ইনপুট নিয়ে কনটেন্ট পরিবর্তন
উপরে স্টাটিক কনটেন্ট দিয়ে "show" এলিমেন্টের ভিতর কনটেন্ট ঢুকানো হয়েছে এবার সেখানেই ইউজারের কাছে ইনপুট নিয়ে সেই কনটেন্ট দেখানো হচ্ছে।01.<!DOCTYPE html>02.<html>03.<head>04.<script>05.function showEmail(){06.var getEmail = document.getElementById('email').value;07. 08.var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;09. 10.if(getEmail.length == 0 || filter.test(getEmail) != true){11.document.getElementById('email').value = '';12.alert('Please enter valid email');13.return false;14.}else{15.document.getElementById('show').innerHTML = getEmail;16.}17.}18. 19.</script>20.</head>21.<body>22. 23.<input id="email" type="text" maxlength="40" autocomplete="off" placeholder="Enter Email here"/>24.<input type="button" onclick="showEmail()" value="Show Email"/>25. 26.<h3 id="show"></h3>27. 28.</body>29.</html>** এখানে showMail() ফাংশনে আগে ভেলিডেশন করেছি যে ইমেইল দিয়েছে কিনা। না দিলে কোন আউটপুট দেখাবেনা আর ঠিক ইমেইল ঠিকানা দিলে সেটা "show" আইডি ধারী এলিমেন্টে দেখিয়ে দেবে।
** ই্উজার যে ইমেইল লিখবে সেটা var getEmail এ রেখে দিয়েছি এবং কোডের ১৫ নম্বর লাইনে দেখুন "show" আইডি ধরে সেখানে দেখিয়ে দিয়েছি যখন ভেলিডেশনের পর এই কোডব্লকে ঢুকবে।
0 মন্তব্য(গুলি):
Post a Comment