JavaScript တွင် အရာဝတ္ထုတစ်ခုကို ဝှက်ရန် နှင့် ပြသရန် ခလုတ်များ

ဤအပိုင်းတွင် စာမျက်နှာရှိ အရာဝတ္ထုများကို ဝှက်ခြင်းနှင့် ပြသခြင်းတို့ကို သင်ယူပါမည်။ ပုံမှန်အတိုင်း၊ တစ်ခုခုရိုးရှင်းသောအရာဖြင့် စတင်ပြီး တဖြည်းဖြည်း ရှုပ်ထွေးလာစေပါမည်။

လေ့ကျင့်ခန်းအတွက် စာပိုဒ်တစ်ခုနှင့် ခလုတ်နှစ်ခု ရှိသည်ဟု ဆိုကြပါစို့။

<p id="elem">စာသား</p>
<input type="submit" id="show" value="ပြပါ">
<input type="submit" id="hide" value="ဝှက်ပါ">

ကျွန်ုပ်တို့၏ အရာဝတ္ထုများသို့ လင့်ခ်များကို variable များတွင် ရယူကြပါစို့။

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

ယခု ခလုတ်တစ်ခုကို နှိပ်လိုက်သောအခါ ကျွန်ုပ်တို့၏ စာပိုဒ်သည် ပေါ်လာပြီး နောက်တစ်ခုတွင် ပေါ်လာစေရန် ပြုလုပ်ကြပါစို့။ ဤသို့ပြုလုပ်ရန် သင့်လျော်သော CSS class ကို အရာဝတ္ထုအား ပေးခြင်း သို့မဟုတ် ဖယ်ရှားခြင်း ပြုလုပ်ပါမည်။

.hidden {
	display: none;
}

ကျွန်ုပ်တို့၏ ပြဿနာကို ဖြေရှင်းကြပါစို့။

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

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

ကျွန်ုပ်ကုဒ်ကို ခလုတ်တစ်ခုတည်းသာ ရှိစေရန် ပြုပြင်ပါ။ ဤခလုတ်ကို ပထမအကြိမ်နှိပ်လိုက်သောအခါ အရာဝတ္ထုကို ပြသပြီး ဒုတိယအကြိမ်တွင် ဝှက်ထားစေပါ။