Javascript, Radios und Checkbox: So sorgen Sie dafür, dass ein „markiertes“ Element beim Öffnen funktioniert ⇐ JavaScript

[Anonymous]

Dieser Code ist eine Demonstration zweier Funktionen, der Kontrollkästchen und der Radios. Es erscheint ein schwarz umrandetes Feld mit zwei Möglichkeiten, den Stil zu ändern. Aktivieren Sie das Kontrollkästchen, um den Rand in ein 5 Pixel großes, einfarbiges Lila zu ändern. Deaktivieren Sie das Kontrollkästchen, um zum ursprünglichen 1 Pixel großen, durchgehenden Schwarz zurückzukehren. Verwenden Sie die Optionsfelder, um die Hintergrundfarbe des Felds in Rot, Grün oder Blau zu ändern.
Achten Sie besonders auf die Optionsfelder. Rot ist auf „aktiviert“ gesetzt, was bedeutet, dass die Farbe des Kästchens beim Öffnen oder Aktualisieren dieser Frageseite standardmäßig auf Rot hätte gesetzt sein sollen, aber das ist nicht der Fall. Stattdessen gibt es keine Farbe, und damit das Kästchen rot wird, müssen Sie es durch Klicken auf das rote Radiorad erzwingen. Vergleichen Sie das mit der Checkbox-Eingabe, bei der das Umschalten zwischen aktivierten und nicht aktivierten Parametern wie beabsichtigt funktioniert.
Ich habe immer gedacht, dass jedes Element, das mit „markiert“ gekennzeichnet ist, automatisch aktiv ist, vorausgesetzt, die Check-Deklarationen werden in Ihrem Javascript vorgenommen. Im Beispiel zum Umschalten des Kontrollkästchens „Rahmen“ (siehe border.addEventListener) wurde die ursprüngliche Fallback-Option auf „initial“ gesetzt und in diesem Fall würde das Kästchen auf seinen 1-Pixel-Schwarzstil zurückgesetzt. Allerdings funktionierte das Schlüsselwort „initial“ nicht, da während meines Tests der gesamte Rahmen verschwand, sodass ich als Sicherheitsmaßnahme in derselben Zeile explizit „1px solid black“ angeben musste.
Meine ursprüngliche Frage war, warum die Funktion „checked“ bei Kontrollkästchen besser funktioniert als bei Radios, aber um ehrlich zu sein, muss ich besser verstehen, wie die Funktion „checked“ funktioniert, wenn es um Javascript geht. Wie schreibe ich diesen Code so um, dass beim Öffnen dieser Webseite die Farbe des Felds automatisch auf den eingestellten Wert geändert wird? Wenn Rot „markiert“ war, ist das Kästchen bereits rot und so weiter.

Code: Select all

function changeBorder() {
const monitor = document.querySelector(".Screen");
const border = document.getElementById("ScreenBorder");

border.addEventListener("change", () => {
border.checked ? monitor.style.border = "5px solid purple" : monitor.style.border = "1px solid black";
});
}

function changeBG() {
const screen = document.querySelector(".Screen");
const screenbackground = document.querySelectorAll('INPUT[name="r"]');

screenbackground.forEach(radio => {
radio.addEventListener('click', () => {
const bgColor = radio.value;
screen.style.background = bgColor;
});
});
}

changeBorder();
changeBG();

Code: Select all

DIV.Screen {
border: 1px solid black;
width: 256px;
height: 256px;
}

Code: Select all

Red
Blue
Green

Violet Border