জাভাস্ক্রিপ্টে উপাদান লুকানো এবং দেখানোর বোতাম

এই বিভাগে আমরা পৃষ্ঠার উপাদানগুলি লুকানো এবং দেখানো শিখব। যথারীতি, আমরা কিছু সহজ দিয়ে শুরু করব, এবং ধীরে ধীরে জটিল করে তুলব।

ওয়ার্ম-আপ হিসাবে আমাদের কাছে একটি অনুচ্ছেদ এবং দুটি বোতাম থাকুক:

<p id="elem">text</p>
<input type="submit" id="show" value="show">
<input type="submit" id="hide" value="hide">

ভেরিয়েবলে আমাদের উপাদানগুলির রেফারেন্স পাই:

let elem = document.querySelector('#elem');
let show = document.querySelector('#show');
let hide = document.querySelector('#hide');

এখন এমন করা যাক যে একটি বোতামে ক্লিক করলে আমাদের অনুচ্ছেদটি লুকিয়ে যায়, এবং অন্যটিতে - এটি দেখা যায়। এর জন্য আমরা উপাদানটিকে সংশ্লিষ্ট CSS ক্লাস দেব বা সরিয়ে নেব:

.hidden {
	display: none;
}

আসুন আমাদের কাজটি সমাধান করি:

hide.addEventListener('click', function() {
	elem.classList.add('hidden');
});

show.addEventListener('click', function() {
	elem.classList.remove('hidden');
});

আমার কোডটি এমনভাবে পরিবর্তন করুন যাতে শুধুমাত্র একটি বোতাম থাকে। এই বোতামে প্রথম ক্লিকে উপাদানটি দেখা যাক, এবং দ্বিতীয় ক্লিকে - এটি লুকিয়ে যাক।