जावास्क्रिप्ट पर तत्व छिपाने और दिखाने के बटन

इस खंड में, हम पृष्ठ तत्वों को छिपाना और दिखाना सीखेंगे। हमेशा की तरह, कुछ सरल से शुरू करेंगे, और धीरे-धीरे जटिल बनाते जाएंगे।

वार्म-अप के लिए मान लें कि हमारे पास एक पैराग्राफ और दो बटन हैं:

<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');
});

मेरे कोड को ऐसे संशोधित करें कि केवल एक ही बटन हो। इस बटन पर पहले क्लिक करने से तत्व दिखाई दे, और दूसरे पर - छिप जाए।