Вход

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

golden_yuna
16.04.2016, 00:52
Добрый вечер,

Не могу понять как заставить работать анонимную функцию при загрузке страницы. Сама функция написана для чекбокса(скрывает/отображает 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";
}


Когда запускаешь через консоль все работает.
рони
16.04.2016, 01:03
golden_yuna,
может скрипт поставить внизу страницы?
golden_yuna
16.04.2016, 01:09
Простите, я не совсем понимаю как это
рони
16.04.2016, 01:22
golden_yuna,
...
<script>
тут ваш код
</script>
</body>
golden_yuna
16.04.2016, 15:06
рони, спасибо огромное!!!
рони
16.04.2016, 15:16
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>
golden_yuna
16.04.2016, 15:36
рони, спасибо еще раз, буду знать как это реализовать с "DOMContentLoaded", вчера ночью не додумалась до этого. Можно еще один вопрос по чекбоксам?
рони
16.04.2016, 15:44
Можно еще один вопрос по чекбоксам?
да
golden_yuna
16.04.2016, 19:31
рони, если у меня есть, пусть будет, 3 чекбокса сделанных при помощи анонимных функций(как в первом сообщении), можно ли приделать четвертый, который будет включать/отключать их все одновременно? будут ли выполняться функции?
рони
16.04.2016, 20:01
golden_yuna,
да
рони
16.04.2016, 20:42
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>