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
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"
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 :)