Javascript getElementById не может найти div, даже если функция вызывается в конце документа - PullRequest
Новая
       21

Javascript getElementById не может найти div, даже если функция вызывается в конце документа

1 голос
/ 09 ноября 2019

Я пытаюсь сделать переключатель, который изменит отображение элемента на «нет», если это «блок», а затем, если это «блок», на «нет». В основном: 

if (item.style.display == "none")
{
    item.style.display = "block";
}
else if (item.style.display == "block")
{
    item.style.display = "none";
}

Я дал идентификатор элементу (id = "item"), но по какой-то причине моя функция javascript не будет читать item.style.display

Когда я делаю оповещение (item.style.display), я получаю пустое оповещение. В следующем коде я не получаю никаких предупреждений. 

<!DOCTYPE html>

<html>

<head>
    <title>Test</title>
    <style>
        #item
        {
                display: none;
        }
    </style>
    <script>
        function showalert()
        {
                var item = document.getElementById('item');
                
                if (item.style.display == "none")
                {
                    alert("Not shown");
                }
                else if (item.style.display == "block")
                {
                    alert("shown");
                }
        }
    </script>
</head>

<body>
        <div id="item">
                Div item
        </div>
        <button onClick="showalert()">Click Me</button>
</body>
</html>

Я делал это раньше, но я просто не могу воспроизвести это. Я прочитал несколько ответов здесь, большинство из них были решены, когда сценарий был перенесен в конец документа. Однако я только определил функцию в сценарии и запустил ее в конце документа после элемента div.

Может кто-нибудь показать мне, что я сделал не так? Заранее спасибо.

Ответы [ 3 ]

1 голос
/ 09 ноября 2019

Стили, заданные таблицами стилей CSS (и тегами <script>), не доступны без window.getComputedStyle или установки свойства непосредственно в JS.

Вот пример, устанавливающий свойство напрямуюв JS: 

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <style>
    #item {
      display: none;
    }
  </style>
</head>

<body>
  <button onclick="toggle()">Click Me</button>
  <div id="item">
    Div item
  </div>

  <script>
    var item = document.getElementById("item");
    item.style.display = "none";

    function toggle() {
      item.style.display = item.style.display === "none" ? "block" : "none";
    }
  </script>
</body>
</html>

И пример использования getComputedStyle, который возвращает живой CSSStyleDeclaration объект, который динамически обновляется: 

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <style>
    #item {
      display: none;
    }
  </style>
</head>

<body>
  <button onclick="toggle()">Click Me</button>
  <div id="item">
    Div item
  </div>

  <script>
    const item = document.getElementById("item");
    const itemStyle = getComputedStyle(item, null);

    function toggle() {
      item.style.display = itemStyle.display === "none" ? "block" : "none";
    }    
  </script>
</body>
</html>

С другой стороны, JS распознает встроенный стиль из коробки, но это не особенно масштабируемое решение.

Это также хорошая идея дляdefer сценарий, оберните его в функцию onload или просто переместите его в конец страницы. Это позволяет избежать ситуации, когда JS пытается получить доступ к элементам DOM, которые еще не загружены.

1 голос
/ 09 ноября 2019

Вы должны переключить свойство display между «none» и «» (пустая строка), чтобы альтернативой было значение по умолчанию или унаследованное значение отображения, например, 

item.style.display = item.style.display == 'none'? '' : 'none';

Другой подход заключается в добавлении и удалениикласс, так как он намного более расширяем и сохраняет разделенную логику, то есть вы не смешиваете стиль и сценарий.

Например 

window.onload = function() {
  document.querySelector('button').addEventListener('click', showalert, false);
}

function showalert(evt) {
  document.getElementById('item').classList.toggle('notShown');
}
.notShown {
  display: none;
}
 <div id="item" class="notShown">Div item</div>
<button>Click Me</button>
1 голос
/ 09 ноября 2019

ваш HTML DIV неправильный, вам нужно поместить отображение стиля на элемент, чтобы ваши IF работали: 

<div id="item" style="display:none;">
            Div item
</div>
<button onClick="showalert()">Click Me</button>

function showalert()
    {
            var item = document.getElementById('item');

            if (item.style.display == "none")
            {
                alert("Not shown");
            }
            else if (item.style.display == "block")
            {
                alert("shown");
            }
    }

Так что, если отображение элемента DIV отсутствует, предупреждение будет "Непоказано "

...