Форум

Artur_Hopf · #1 (**permalink**) 09.04.2018, 13:09

Добрый день, объясните пожалуйста, почему условие не срабатывает при первом клике? При последующих кликах все работает хорошо

<style type="text/css">
            #box{display: none}
</style>
    <body>
        <div id="date"></div>
        <div id="box">Вот</div>
        <button id="onclick" onclick="box_click()">Кнопка</button>
        <script type="text/javascript">
            function box_click() {
                var c = document.getElementById("box");
                if(c.style.display === 'none'){
                   c.style.display = 'inline';
                } else{
                    c.style.display = 'none';
                };
            }
        </script>

Nexus · #2 (**permalink**) 09.04.2018, 13:20

Artur_Hopf, условие, в общем-то, выполняется.
Изначально у кнопки style.display не равен строке 'none', поэтому кнопка скрывается.
Попробуйте так:

<style type="text/css">
            #box{display: none}
</style>
    <body>
        <div id="date"></div>
        <div id="box">Вот</div>
        <button id="onclick" onclick="box_click()">Кнопка</button>
        <script type="text/javascript">
      function box_click() {
          var node = document.getElementById("box");
          if (window.getComputedStyle(node).getPropertyValue('display') == 'none') {
              node.style.display = 'inline';
          } else {
              node.style.display = 'none';
          };
      }
        </script>

Artur_Hopf · #3 (**permalink**) 09.04.2018, 13:24

Nexus,
Спасибо, все хорошо работает

Artur_Hopf · #4 (**permalink**) 09.04.2018, 14:01

Если я добавлю в условие чтобы box скрывался через 8 секунд, как это адекватно прописать? Например если напишут так, то кнопка будет скрываться, а условие setInterval не будет обнуляться, при последующих нажатиях будет срабатываеть предыдущие таймеры на скрытие, clearInterval возможно неправильно привязан:

<style type="text/css">
            #box{display: none}
</style>
    <body>
        <div id="date"></div>
        <div id="box">Вот</div>
        <button id="onclick" onclick="box_click()">Кнопка</button>
        <script type="text/javascript">
      function box_click() {
          var node = document.getElementById("box");
          if (window.getComputedStyle(node).getPropertyValue('display') == 'none') {
              node.style.display = 'inline';
              var id = setTimeout(function() {node.style.display = 'none';}, 8000);
          } else {
              node.style.display = 'none';
              clearInterval(id);
          };
      }
        </script>

Nexus · #5 (**permalink**) 09.04.2018, 14:05

Artur_Hopf,

var id = 0;

function box_click() {
    clearTimeout(id);
    var node = document.getElementById("box");
    if (window.getComputedStyle(node).getPropertyValue('display') == 'none') {
        node.style.display = 'inline';
        id = setTimeout(function() {
            node.style.display = 'none';
        }, 8000);
    } else {
        node.style.display = 'none';

    };
}

Artur_Hopf · #6 (**permalink**) 09.04.2018, 14:38

Nexus,
Спасибо

рони · #7 (**permalink**) 09.04.2018, 15:39

решение подобных задач: начинают проверку не с === , а !== изначально отсутствующему значению, в данном случае 'inline'!!!
вариант если элемент изначально скрыт

<meta charset="utf-8">
<style type="text/css">
                        #box{display: none}
</style>
        <body>
                <div id="date"></div>
                <div id="box">Вот</div>
                <button id="onclick" onclick="box_click()">Кнопка</button>
                <script type="text/javascript">
            function box_click() {
                    var style = document.getElementById("box").style;
                    if (style.display  != 'inline') {
                            style.display = 'inline';
                    } else {
                            style.display = 'none';
                    };
            }
                </script>
        </body>

вариант если элемент изначально открыт

<meta charset="utf-8">
<style type="text/css">
                        #box{display: inline}
</style>
        <body>
                <div id="date"></div>
                <div id="box">Вот</div>
                <button id="onclick" onclick="box_click()">Кнопка</button>
                <script type="text/javascript">
            function box_click() {
                    var style = document.getElementById("box").style;
                    if (style.display  != 'none') {
                            style.display = 'none';
                    } else {
                            style.display = 'inline';
                    };
            }
                </script>
        </body>

Форум

Справочник

Discord чат

Курсы javascript