Butoane pentru ascunderea și afișarea elementului în JavaScript
În această secțiune vom învăța să ascundem și să afișăm elementele paginii. Ca de obicei, vom începe cu ceva simplu și vom complica treptat.
Să presupunem pentru încălzire că avem un paragraf și două butoane:
<p id="elem">text</p>
<input type="submit" id="show" value="show">
<input type="submit" id="hide" value="hide">
Să obținem referințele la elementele noastre în variabile:
let elem = document.querySelector('#elem');
let show = document.querySelector('#show');
let hide = document.querySelector('#hide');
Acum să facem ca la click pe un buton paragraful nostru să se ascundă, iar pe celălalt - să se afișeze. Pentru asta vom adăuga sau vom elimina din element clasa CSS corespunzătoare:
.hidden {
display: none;
}
Să rezolvăm sarcina noastră:
hide.addEventListener('click', function() {
elem.classList.add('hidden');
});
show.addEventListener('click', function() {
elem.classList.remove('hidden');
});
Modificați codul meu astfel încât să existe doar un singur buton. Fie ca la primul click pe acest buton elementul să se afișeze, iar la al doilea - să se ascundă.
