JS функция, если / иначе переключение дисплея не работает - PullRequest
Новая
       3

JS функция, если / иначе переключение дисплея не работает

0 голосов
/ 02 августа 2020

Я хочу кнопку, которая переключает отображение и блокировку. Он работает в первый раз, скрывая H1, но не работает во второй раз. Я заглянул в консоль, и там переключился только первый оператор if. 

<html>
    <head>
        <style>
            h1 {display: block;}
        </style>
    </head>
    <body>
        <h1 id="hello">hello there</h1>
        <button onclick="hide()">hide</button>
    </body>
    <script>
        var h1 = document.getElementById("hello")

        function hide() {
            if (h1.style.display ="block"){
                h1.style.display ="none"
                console.log ("display none")
            } else if (h1.style.display ="none"){
                h1.style.display ="block"
                console.log ("display block")
            }
        }
    </script>
</html>

Я пробовал 

if (h1.style.display == "none")

, но тогда он вообще не работает. Даже не переключается с первого раза.

Ответы [ 7 ]

1 голос
/ 02 августа 2020

Обратите внимание, что вы назначаете вместо проверки: 

if (h1.style.display ="block")

Один = означает присвоение «блока» свойству отображения, и оно вернет true, и поэтому всегда будет устанавливать отображение на false .

вы должны сделать это следующим образом: 

if (h1.style.display == "block")

And 

} else if (h1.style.display == "none"){

Вы также можете сделать свой код более эффективным, используя некоторые функции ES6: 

h1.style.display = h1.style.display == 'block' ? 'none' : 'block'

Метка ? - это короткое if, а : - короткое else.

Таким образом, он в основном говорит, что если значение является блочным, установите значение none, иначе установите его для блокировки.

Подробнее об операторах в JS и ES6.

0 голосов
/ 02 августа 2020 

<html>
    <head>
        
    </head>
    <body>
        <h1 id="hello">hello there</h1>
        <button onclick="hide()">hide</button>
    </body>
    <script>
        var h1 = document.getElementById("hello")

        function hide() {
            if (hello.hidden==true){
                hello.hidden=false;
        
            } 
            else{
                hello.hidden=true;
            }
        }
    </script>
</html>
0 голосов
/ 02 августа 2020

В приведенном выше коде отсутствуют две вещи.

  1. Чтобы использовать для сравнения оператор равенства, а не оператор присваивания: h1.style.display === "block"

  2. a) Чтобы получить актуальную стилизацию элемента, необходимо использовать DOM CSS. б) Для доступа к свойству стиля из DOM необходимо использовать встроенные стили.

Метод a: с использованием DOM CSS: 

var h1 = document.getElementById("hello");
       
        function hide() {
        
        var h1Display = window.getComputedStyle(h1).display;
            if (h1Display === "block"){
                h1.style.display ="none";
            } else if (h1Display === "none"){
                h1.style.display ="block"
            }
        }
h1 {display: block;}
<html>
        <body>
            <h1 id="hello" >hello there</h1>
            <button onclick="hide()">hide</button>
        </body>
  </html>
Метод б) с использованием встроенного стиля: 
<html>
<h1 id="hello" style="display:block" >hello there</h1>
     <script>
            var h1 = document.getElementById("hello");
    
            function hide() {
                if (h1.style.display === "block"){
                    h1.style.display ="none"
                    console.log ("display none")
                } else if (h1.style.display === "none"){
                    h1.style.display ="block"
                    console.log ("display block")
                }
            }
        </script>
</html>
0 голосов
/ 02 августа 2020

Самый простой ответ, который я нашел, был такой:

не имеет значения, что вы пробовали == или === в своем коде, если (h1.style.display = "block") всегда истинно потому что это выражение, которое возвращает строку ненулевой длины в данном случае «блок». ваш первый блок if всегда будет истинным, если вы сделаете это if (h1.style.display = "block")

ОТВЕТ: причина, по которой он не работает, заключается в том, что вы должны вначале style.display h1 заблокировать другие мудрый, ни один из операторов if не работает: добавьте это в свой тег h1 style = "display: block;" не забудьте заменить = на == или === -

Итак, я сделал такой код: 

<html>
    <head>
        <style>
            h1 {}
        </style>
    </head>
    <body>
        <h1 id="hello">hello there</h1>
        <button onclick="hide()">hide</button>
    </body>
    <script>
        var h1 = document.getElementById("hello")

        h1.style.display = "block"

        function hide() {
            if (h1.style.display == "block"){
                h1.style.display = "none"
                console.log ("display none")
            } else if (h1.style.display == "none"){
                h1.style.display = "block"
                console.log ("display block")
            }
        }
    </script>
</html>

Не самый чистый, но работает

0 голосов
/ 02 августа 2020

Вы используете присвоение = в условиях if и else if. Вы должны использовать == или === для проверки равенства. Также вы не учитываете начальный случай, когда element.style.display будет пустым, например ""

Но реальный ответ: не делайте этого. Используйте фреймворк MVC, MVVM, MV *, такой как React, Angular, и c, чтобы скрыть / показать вам вещи на основе какой-либо модели. Они могут обрабатывать гораздо более сложные модели и преобразовывать пользовательский интерфейс во многие другие за вас.

0 голосов
/ 02 августа 2020

h1.style относится к атрибуту стиля в теге HTML. Для большего контроля я бы рекомендовал использовать classList, чтобы определить, есть ли класс hide в элементе. Я протестировал следующий код, и он работает. 

<html>
    <head>
        <style>
            .hide {display: none;}
        </style>
    </head>
    <body>
        <h1 id="hello">hello there</h1>
        <button onclick="hide()">hide</button>
    </body>
    <script>
        var h1 = document.getElementById("hello")

        function hide() {
            if (h1.classList.contains('hide')) {
                h1.classList.remove('hide');
            } else {
                h1.classList.add('hide');
            }
        }
    </script>
</html>
0 голосов
/ 02 августа 2020
Переключение

может быть прямо указано при назначении класса

см. Do c: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

пример кода: 

const myHello      = document.getElementById('hello')
  ,   mybtShowHide = document.getElementById('bt-show-hide')


mybtShowHide.onclick =() =>
  {
  let status = myHello.classList.toggle('noDisplay')

  console.clear()  
  if (status) console.log ("display none")
  else       console.log ("display block")
  }
.noDisplay { display: none; }
<h1 id="hello">hello there</h1>
<button id="bt-show-hide"> show / hide</button>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...