Элементни яшириш ва кўрсатиш учун тугмалар JavaScriptда

Ушбу бўлимда биз саҳифа элементларини яшириш ва кўрсатишни ўрганамиз. Оддатий холда, Oddiy narsadan бошлаймиз ва аста-секин мураккаблаштирамиз.

Илдиз олиш учун бизда параграф ва иккита тугма бор дейлик:

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

Менинг кодимни ўзгартирингки, фақат битта тугма бўлсин. Биринчи марта шу тугма босилганда элемент кўринисин, иккинчи марта босилганда эса яширинсин.