PDA

Просмотр полной версии : Вопросы по 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.

<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 знатокам (http://forum.battlefox.ru/showthread.php?t=10690) писать... мб объединить лучше две темы?

Добавлено через 5 минут
P.S. Незачем дублировать код в двух функциях. Проще и эффективнее передавать в одну функцию флаг open/close.
А, ну понятно. Тут вообще всё работает на первой, так сказать, универсальной функции. Просто изучаю по youtube-урокам, а там так, видимо для понимания основ, сделано.
MDM
18.01.2011, 19:36
А почему так, можешь в двух словах объяснить?
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, а, ну говорю же, что учуся ещё :)