Schaltflächen zum Ausblenden und Anzeigen von Elementen in JavaScript

In diesem Abschnitt lernen wir, Elemente der Seite auszublenden und anzuzeigen. Wie üblich fangen wir mit etwas Einfachem an und werden es schrittweise komplizierter gestalten.

Nehmen wir zur Aufwärmung einen Absatz und zwei Schaltflächen:

<p id="elem">text</p>
<input type="submit" id="show" value="show">
<input type="submit" id="hide" value="hide">

Holen wir uns Referenzen auf unsere Elemente in Variablen:

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

Lassen Sie uns nun bewirken, dass bei einem Klick auf die eine Schaltfläche unser Absatz ausgeblendet wird und bei der anderen - angezeigt wird. Wir werden dazu dem Element die entsprechende CSS-Klasse geben oder sie entfernen:

.hidden {
	display: none;
}

Lösen wir unsere Aufgabe:

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

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

Modifizieren Sie meinen Code so, dass es nur eine Schaltfläche gibt. Lassen Sie beim ersten Klick auf diese Schaltfläche das Element anzeigen und beim zweiten - ausblenden.