Javascript, радио и флажок: как заставить «отмеченный» элемент работать при открытии ⇐ Javascript

[Anonymous]

Javascript

Код: Выделить всё

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();

CSS

Код: Выделить всё

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

HTML

Код: Выделить всё

Red
Blue
Green

Violet Border

Этот код демонстрирует две функции: флажки и радиопереключатели. Появится окно с черной рамкой, в котором можно изменить его стиль двумя способами. Установите флажок, чтобы изменить границу на сплошной фиолетовый цвет толщиной 5 пикселей, снимите флажок, чтобы вернуться к исходному сплошному черному цвету размером 1 пиксель. Используйте переключатели, чтобы изменить цвет фона поля на красный, зеленый или синий.
Особое внимание обратите на переключатели. Для красного цвета установлен флажок «отмечено», что означает, что цвет поля должен был быть установлен на красный по умолчанию при открытии или обновлении этой страницы запроса, но это не так. Вместо этого цвета нет, и чтобы ящик стал красным, вам придется заставить его нажать на красный переключатель радио. Сравните это с вводом флажка, где поведение переключения между отмеченными и непроверенными параметрами работает так, как задумано.
Я всегда думал, что любой элемент, помеченный как «отмеченный», автоматически активен, при условии, что объявления проверки выполняются в вашем Javascript. В примере переключения флажка границы (см. border.addEventListener) исходный резервный параметр был установлен на «начальный», и в этом случае поле вернется к своему сплошному черному стилю размером 1 пиксель. Однако ключевое слово «initial» не сработало, так как во время моего теста исчезла вся граница, поэтому мне пришлось явно указать «1 пиксель сплошной черный» в той же строке в качестве страховки.
Мой первоначальный вопрос заключался в том, почему функция «отмечено» лучше работает с флажками, а не с радиопереключателями, но, честно говоря, мне нужно лучше понять, как функция «отмечено» работает, когда дело касается Javascript. Как мне переписать этот код, чтобы при открытии этой веб-страницы цвет поля автоматически менялся на любое установленное значение? Если красный был отмечен флажком, флажок уже красный и так далее.

Подробнее здесь: https://stackoverflow.com/questions/797 ... on-opening