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

Battle Forum (http://battlefox.rooty.ru/index.php)

- Web-программирование / Сайтостроение (http://battlefox.rooty.ru/forumdisplay.php?f=110)

- - Вопросы по JS знатокам (http://battlefox.rooty.ru/showthread.php?t=15374)

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

Незамысловатый кодец такой)
Вопрос в следующем: почему при первом клике, после загрузки страницы, 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>

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

Код HTML:

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

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

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

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

Оффтоп

Оффтоп

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

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

Цитата:

Сообщение от MDM (Сообщение 470352)

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

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

Цитата:

Сообщение от SoaT (Сообщение 470392)

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

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

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>

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

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

Оффтоп

Оффтоп

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