Javascript-форум - запуск анонимной функции при загрузке страницы

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - запуск анонимной функции при загрузке страницы (https://javascript.ru/forum/misc/62549-zapusk-anonimnojj-funkcii-pri-zagruzke-stranicy.html)

запуск анонимной функции при загрузке страницы

Добрый вечер,

Не могу понять как заставить работать анонимную функцию при загрузке страницы. Сама функция написана для чекбокса(скрывает/отображает div элемент).

HTML:

<input id="checkFocus" type="checkbox" checked="true"/>

JS:

document.getElementById("checkFocus").onchange = function(){
    var dat = document.getElementById("focus");
    if (document.getElementById("checkFocus").checked === true) {
        return dat.style.display = "block";
    }
    else  return dat.style.display = "none";
}

Когда запускаешь через консоль все работает.

golden_yuna,
может скрипт поставить внизу страницы?

Простите, я не совсем понимаю как это

golden_yuna,

...
<script>
  тут ваш код
</script>
</body>

рони, спасибо огромное!!!

golden_yuna,
на всякий случай

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
 <style type="text/css">
    #focus{
         border: 1px dashed Gray; padding: 5px; height: 100px; width: 100px ; background-color: #A9A9A9;
    }

  </style>


  <script>
window.addEventListener("DOMContentLoaded", function() {
    var node = document.getElementById("checkFocus"),
        dat = document.getElementById("focus");
    node.addEventListener("change", function() {
        dat.style.display = this.checked ? "block" : "none"
    })
});
  </script>
</head>

<body>
<input id="checkFocus" type="checkbox" checked="true"/>

 <div id="focus"></div>
</body>
</html>

рони, спасибо еще раз, буду знать как это реализовать с "DOMContentLoaded", вчера ночью не додумалась до этого. Можно еще один вопрос по чекбоксам?

Цитата:

Сообщение от golden_yuna

Можно еще один вопрос по чекбоксам?

да

рони, если у меня есть, пусть будет, 3 чекбокса сделанных при помощи анонимных функций(как в первом сообщении), можно ли приделать четвертый, который будет включать/отключать их все одновременно? будут ли выполняться функции?

golden_yuna,
да

checkbox and all

golden_yuna,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
 <style type="text/css">
    .focus{
         border: 1px dashed Gray; padding: 5px; height: 100px; width: 100px ; background-color: #A9A9A9;
    }
    label{
      display: block;
    }

  </style>


  <script>
window.addEventListener("DOMContentLoaded", function() {
    var node = document.querySelectorAll(".checkFocus"),
        dat = document.querySelectorAll(".focus"),
        all = document.querySelector(".all");
    [].forEach.call(node, function(item, i) {
        item.addEventListener("change", function() {
            dat[i].style.display = this.checked ? "block" : "none";
            all.checked = [].every.call(node, function(el) {
                return el.checked
            })
        })
    });
    all.addEventListener("change", function() {
        [].forEach.call(node, function(item, i) {
            item.checked = all.checked;
            dat[i].style.display = item.checked ? "block" : "none"
        })
    })
});

  </script>
</head>

<body>
<label><input class="checkFocus" type="checkbox" checked="true"/>1</label>
<div class="focus">1</div>
<label><input class="checkFocus" type="checkbox" checked="true"/>2</label>
<div class="focus">2</div>
<label><input class="checkFocus" type="checkbox" checked="true"/>3</label>
<div class="focus">3</div>
<label><input class="all" type="checkbox" checked="true"/>all</label>
</body>
</html>