HTML, CSS, JS If-Statement wird erst nach Reload ausgeführt?
Hallo zusammen,
ich habe folgenden Code:
const radiomore = document.getElementById('qty-more');
const lower = document.getElementById('lower-section');
const more = document.getElementById('more-section');
if(radiomore.checked) {
lower.style.display = "none";
more.style.display = "initial";
} else {
lower.style.display = "initial";
more.style.display = "none";
}
Die Funktion wird allerdings erst ausgeführt, wenn ich die Seite manuell reloade.
Kennt jemand dafür eine Lösung?
Vorab Danke.
1 Antwort
Wenn kein weiterer Code diesen Abschnitt umfasst, würde dein Code nur einmal beim Laden der Seite ausgeführt werden. Danach ist das Programm beendet.
Wenn du den Code immer dann ausführen möchtest, wenn sich der Radiobutton im Wert ändert, brauchst du einen Event Listener.
const radiomore = document.getElementById('qty-more');
const lower = document.getElementById('lower-section');
const more = document.getElementById('more-section');
// set default state
lower.style.display = "initial";
more.style.display = "none";
radiomore.addEventListener("change", () => {
if (radiomore.checked) {
lower.style.display = "none";
more.style.display = "initial";
}
});
Dieser kann aber nur registrieren, ob der Button selektiert wurde. Wenn ein anderer Radiobutton derselben Gruppe angeklickt wird, sollte dieser den Code durchführen, der bei Deselektion des ersten Radiobuttons ausgeführt werden sollte.
Ich denke es wäre besser, du teilst ein Fiddle und erklärst ausführlich, was du vorhast.
Nun funktioniert der Switch zum Radio Button (#qty-more, const radiomore) aber nicht zurück. Hast du dafür eine Erklärung?