Wie benutze ich btn in js richtig?
Hi, ich möchte das wenn man auf den btn klickt das die anderen elemente nicht mehr zusehen sind bzw. auszublenden aber wenn man wieder auf den btn klickt ist alles wieder beim normalen wie mache ich das
1 Antwort
Ein leichter Trick in Vanilla Javascript wäre, den Elementen bei Knopfdruck eine Klasse zu geben, welche dafür sorgt das deren Display Attribut auf "none" setzt.
Als Beispiel ein bisschen Pseudo-Code:
Ein kleines Beispiel:
html:
...
<body>
<p class="text">Hi</p>
<button id="button">Btn</button>
</body>
css:
.selected{
display: none
}
js:
const btn = document.getElementById("button");
btn.addEventListener("click", () => {
let text = document.querySelector(".text");
// Hier eignet sich ein ternary operator wunderbar:
// Syntax: bedingung ? code falls ja : code falls nein
text.classList.contains("selected") ? text.classList.remove("selected") : text.classList.add("selected");
});
Durch den Code wird dem Element die "Selected" Klasse gegeben und somit wird die Selected Klasse aus dem Stylesheet angewendet. Ich hoffe das ganze ist verständlich.
Woher ich das weiß:eigene Erfahrung