Paragraphen mit Button in JS ausblenden?
Kann mir jemand sagen, wie ich mit dem vorgegebenen Code (ich darf nichts ändern, sondern nur die function ergänzen) die Paragraphen ausblenden kann?
1 Antwort
![](https://images.gutefrage.net/media/user/Erzesel/1497339133085_nmmslarge__0_524_1080_1080_4b38ff31970de3b94deb6a27ca8a8f01.jpg?v=1497339133000)
Ich werde garantiert keinen Screenshot abtippen, deshalb meine Kurzfassung:
<!DOCTYPE html>
<html>
<body>
<h1>Überschrift</h1>
<h2>Paragraf 1</h2>
<p>blah & blub text</p>
<h2>Paragraf 2</h2>
<p>blah & blub text</p>
<h2>Paragraf 3</h2>
<p>blah & blub text</p>
<button onclick="HideParagraphsJS()">Hide Paragraphes</button>
<button onclick="RemoveParagraphsJS()">Remove Paragraphes</button>
<script>
function HideParagraphsJS() {
//nur unsichtbar machen (Platz bleibt erhalten)
//ermittle alle Ellemente mit dem tag h2
AllH2Paragraphs = document.querySelectorAll('h2');
//schalte für jedes ermittelte Element die Sichtbarkeit auf hidden
AllH2Paragraphs.forEach(element => {
element.style.visibility = "hidden";
});
}
function RemoveParagraphsJS() {
//entfernen (Platz wird freigegeben)
AllH2Paragraphs = document.querySelectorAll('h2');
//...dito , aber garnicht Anzeigen
AllH2Paragraphs.forEach(element => {
element.style.display = "none";
});
}
</script>
</body>
</html>
Da es verschiedene Varianten gibt um Elemente "auszublenden" habe ich Beide mit jeweils einem Button und und der dazugehörigen Funktion implementiert.
- Hide... Macht die Paragraphen nur unsichtbar, behält aber deren Platz,
- Remove... schließt die Elemente von der Anzeige aus (der sichtbare Platz wird freigegeben)
das bedeutet jedoch in beiden Fällen nicht , das die Elemente aus dem Html.Code gelöscht werden. es handelt sich lediglich um zwei verschiedene Formen von "nicht Sichtbar"
![](https://images.gutefrage.net/media/user/Jockelii7500/1656758487503_nmmslarge__0_0_300_300_9a4334409e63f908baa4b0bff88a688f.png?v=1656758488000)
Dankeschön für die ausführliche Erklärung, das hat mir wahnsinnig geholfen und ich entschuldige mich für den Code als Screenshot, ich war mir nicht sicher wie ich es anders zeigen soll :)