Форум

Айvan · #1 (**permalink**) 10.08.2013, 08:33

Код взят из книги Дэвида Флэнагана.

почему ничего не отображается?

<!DOCTYPE html>
<html>
<head>
<title>Документ без названия</title>

<style>
.reveal {
	display:none;
}
.handle {
	display:block;
}
</style>

<script>
window.onload = function() {
	var elements = document.getElementById('reveal');
	
	for(var i = 0; i < elements.length; i++) {
		var elt = elements[i];
		var title = document.getElementById('handle')[0];
		
		addRevealHandler(title, elt);
	}
	
	function addRevealHandler(title, elt) {
		title.onclick = function() {
			if(elt.className == 'reveal') {
				elt.className = 'revealed';
			}
			else if(elt.className == 'revealed') {
				elt.className = 'revel';
			}
		}
	}
	
}
</script>
</head>

<body>

<div class="reveal">
<h1 class="handle">Развернуть/свернуть</h1>
<p>Этот абзац невидим. Он появляется после щелчка по заголовку</p>
</div>


</body>
</html>

danik.js · #2 (**permalink**) 10.08.2013, 11:07

Сообщение от Айvan

почему ничего не отображается?

Потому что твое "все" обернуто в div с классом reveal, который скрыт через css (правило .reveal{display:none} )

Айvan · #3 (**permalink**) 11.08.2013, 06:50

но ведь заголовок h1 с классом handel должен быть видим!

Айvan · #4 (**permalink**) 11.08.2013, 06:51

что тогда такой код делает в книге??

bes · #5 (**permalink**) 11.08.2013, 10:10

Сообщение от Айvan

что тогда такой код делает в книге??

скриншот приведи, что там именно такой код и ты ничего не перепутал

Сообщение от Айvan

var elements = document.getElementById('reveal');
for(var i = 0; i < elements.length; i++) {
...
var title = document.getElementById('handle')[0];

и вот это чё, тоже фленаган?

PS: в консоль кто будет смотреть?

danik.js · #6 (**permalink**) 11.08.2013, 10:18

Сообщение от Айvan

но ведь заголовок h1 с классом handel должен быть видим!

В большом ящике лежит маленький ящик. Если ты не видишь большой ящик (он спрятан), видишь ли ты маленький?
По твоей логике ты его увидишь , ведь он не спрятан!!!

Айvan · #7 (**permalink**) 12.08.2013, 05:22

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

скриншот приведи

danik.js · #8 (**permalink**) 12.08.2013, 09:17

Блин точно! Код 1 в 1 что Айvan тут опубликовал!
Ну флэнаган олень! Просто тормоз. А Айvan красавец - сделал все правильно, но из-за тупости флэнагана код не работает.

bes · #9 (**permalink**) 12.08.2013, 20:19

не ~~бзди~~ горюй Айvan, зато у тебя появился новый друг - консоль

Айvan · #10 (**permalink**) 13.08.2013, 06:36

Скопировал текст с .EPUB целиком, "дословно" и код заработал!

<!DOCTYPE html>
<html>
<head>
<style>
/* Стили CSS для этой страницы */
.reveal * { display: none; } /* Элементы с атрибутом class="reveal" невидимы */
.reveal *.handle { display: block;} /* Кроме элементов с class="handle" */
</style>
<script>
// Ничего не делать, пока документ не будет загружен полностью
window.onload = function() {
// Отыскать все контейнерные элементы с классом "reveal"
var elements = document.getElementsByClassName("reveal");
for(var i = 0; i < elements.length; i++) { // Для каждого такого элемента...
var elt = elements[i];
// Отыскать элементы с классом "handle" в контейнере
var title = elt.getElementsByClassName("handle")[0];
// После щелчка на этом элементе сделать видимым остальное содержимое 
addRevealHandler(title, elt);
}
function addRevealHandler(title, elt) {
title.onclick = function() {
if (elt.className == "reveal") elt.className = "revealed";
else if (elt.className == "revealed") elt.className = "reveal";
}
}
};
</script>
</head>
<body>
<div class="reveal">
<h1 class="handle">Щелкните здесь, чтобы увидеть скрытый текст</h1>
<p>Этот абзац невидим. Он появляется после щелчка на заголовке.</p>
</div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript