Вопросы по JS знатокам

SoaT · 17.01.2011, 22:33

Незамысловатый кодец такой)
Вопрос в следующем: почему при первом клике, после загрузки страницы, div не появляется, а только при втором?

Спойлер

Код:

<html>
	<head>
		<title>test</title>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<style type="text/css">
			div#text {
				border-width: 1px;
				border-color: lightgrey;
				border-style: dashed;
				display: none;
			}
			a {
				color: black;
				border-bottom: 1px dashed lightgrey;
				outline: none;
				text-decoration: none;
			}
		</style>
		<script type="text/javascript">
			function opendiv() {
				var text=document.getElementById('text');
				if (text.style.display=='none')
				{
					text.style.display='block';
				}
				else
				{
					
					text.style.display='none';
				}
			}
			function closediv() {
				var text=document.getElementById('text');
				if (text.style.display=='block')
				{
					text.style.display='none';
				}
			}
		</script>
	</head>
	<body>
		<a href="#" onclick="opendiv()">Скрытый блок:</a>
		<div id="text" onclick="closediv()">
			<p>Это скрытый блок</p>
			<p>Для закрытия кликните по нему</p>
		</div>
	</body>
</html>

**MDM** · 18.01.2011, 01:38

Посмотри, чему равен text.style.display при первом клике. Пустая строка. Чтобы он был равен 'none', явно укажи его с помощью inline-CSS.

Код HTML:

<div id="text" onclick="closediv()" style="display: none;">

А из глобальных стилей можно вообще убрать.

P.S. Незачем дублировать код в двух функциях. Проще и эффективнее передавать в одну функцию флаг open/close.

SoaT · 18.01.2011, 17:48

MDM, ага, заработало. А почему так, можешь в двух словах объяснить? Почему и, главное, когда можно прописывать в глобальных, а когда надо прямо в теге.
Думал что разницы нет. Веть блок то не отображается.

SoaT · 18.01.2011, 17:57

Оффтоп

Оффтоп

Надо было наверное в Вопросы по CSS знатокам писать... мб объединить лучше две темы?

Добавлено через 5 минут

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

P.S. Незачем дублировать код в двух функциях. Проще и эффективнее передавать в одну функцию флаг open/close.

А, ну понятно. Тут вообще всё работает на первой, так сказать, универсальной функции. Просто изучаю по youtube-урокам, а там так, видимо для понимания основ, сделано.

**MDM** · 18.01.2011, 19:36

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

А почему так, можешь в двух словах объяснить?

http://javascript.ru/ui/show-hide-toggle

SuperSkat · 18.01.2011, 21:40

SoaT, Не понял, зачем такой суровый код?

Спойлер

Код:

		<script type="text/javascript">
		function show(){
			var show = document.getElementById('show_hide').style.display;
			if (show == 'none') {
				document.getElementById('show_hide').style.display='block';
				document.getElementById('linkdel').innerHTML='Скрыть';
			}
			if (show == 'block') {
				document.getElementById('show_hide').style.display='none';
				document.getElementById('linkdel').innerHTML='Показать';
			}
		}
		</script>
<div style="width:700px;">
			<div style="padding:3px;text-align:left;border:1px solid gray;background:#f5f5f5;cursor:pointer;" onClick="show();" id="linkdel">Показать</div>

			<div style="padding:2px;text-align:left;border:1px solid gray;background:#f5f5f5;display:none;" id="show_hide">
Скрытый текст
			</div>
		</div>

SoaT · 18.01.2011, 22:16

SuperSkat, чем твой код не суров?

SuperSkat · 18.01.2011, 22:34

SoaT, смутили меня 2 функции, для открытия и закрытия =)

SoaT · 18.01.2011, 23:21

Оффтоп

Оффтоп

SuperSkat, а, ну говорю же, что учуся ещё

18.01.2011, 01:38	#2
MDM Администратор [BATTLE]TEAM	Посмотри, чему равен text.style.display при первом клике. Пустая строка. Чтобы он был равен 'none', явно укажи его с помощью inline-CSS. Код HTML: <div id="text" onclick="closediv()" style="display: none;"> А из глобальных стилей можно вообще убрать. P.S. Незачем дублировать код в двух функциях. Проще и эффективнее передавать в одну функцию флаг open/close. __________________ [BATTLE]SERVER

18.01.2011, 17:48	#3
SoaT Модератор	MDM, ага, заработало. А почему так, можешь в двух словах объяснить? Почему и, главное, когда можно прописывать в глобальных, а когда надо прямо в теге. Думал что разницы нет. Веть блок то не отображается. __________________ Wayland! Прочти: Прощание с мистером Икс / Мысли вслух о протоколе X Последний раз редактировалось SoaT; 18.01.2011 в 17:48.

18.01.2011, 22:16	#7
SoaT Модератор	SuperSkat, чем твой код не суров? __________________ Wayland! Прочти: Прощание с мистером Икс / Мысли вслух о протоколе X

18.01.2011, 22:34	#8
SuperSkat Местный	SoaT, смутили меня 2 функции, для открытия и закрытия =) __________________ wish you were here Последний раз редактировалось SuperSkat; 18.01.2011 в 23:02.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
"Новости Intel, о Intel"	Vadim	Новости и обзоры	584	07.09.2016 14:18
Вопросы по CSS знатокам	dar	Web-программирование / Сайтостроение	39	25.10.2010 12:23
Вопросы знатокам по PHP	dar	Web-программирование / Сайтостроение	4	23.07.2010 01:27
Вопросы Путину	iva	На завалинке	49	14.06.2010 18:28
Вопросы и ответы (F.A.Q.)	MDM	Mozilla Firefox	5	13.11.2006 21:09

Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)