JavaScriptтеги менен элементти жашыруу жана көрсөтүү үчүн баскычтар

Бул бөлүмдө биз барактын элементтерин жашыруу жана көрсөтүүнү үйрөнөбүз. Өзүңүздүн каадасындай, жөнөкөй нерседен баштап, жана аны бөлүк-бөлүк кылып кыйындата беребиз.

Аракетке жылынуу үчүн бизде абзац жана эки баскыч бар деп коёлу:

<p id="elem">текст</p>
<input type="submit" id="show" value="көрсөт">
<input type="submit" id="hide" value="жашыр">

Биздин элементтерге шилтемелерди өзгөрмөлөргө алалы:

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

Менин кодумду өзгөртүңүз, мында бир эле баскыч болсун. Бул баскычка биринчи чыкылдатуу менен элемент көрсөтүлсүн, ал эми экинчисинде - жашырылсын.