我收到错误消息：未捕获的 TypeError: humburger_icon is null答案

【问题标题】：I get the error: Uncaught TypeError: humburger_icon is null我收到错误消息：未捕获的 TypeError: humburger_icon is null
【发布时间】：2021-08-12 06:53:00
【问题描述】：

我正在尝试使这个 Humburger_icon 可点击，但我收到该图标为空的错误消息。该图标是在带有 div 的 html 中创建的。见代码。有谁知道我怎样才能摆脱这个错误？

图标：

错误：未捕获的 TypeError: humburger_icon 为空

[在此处输入图片描述][1]

let humburger_icon = document.getElementById('menu-icon');
let ul_nav_list = document.getElementById('ul-nav-list');

humburger_icon.addEventListener("click", click_icon);

function click_icon() {
    humburger_icon.style.visibility = visible;
}

click_icon();

       <div id="menu-icon">
            <div class="lines"></div>
            <div class="lines"></div>
            <div class="lines"></div>
        </div>

有什么建议吗？

【问题讨论】：

标签： javascript html css icons navbar

【解决方案1】：

运行代码时，可能尚未加载 DOM 树。试试

document.addEventListener('DOMContentLoaded', () => {
  let humburger_icon = document.getElementById('menu-icon');
  let ul_nav_list = document.getElementById('ul-nav-list');

  humburger_icon.addEventListener("click", click_icon);

  function click_icon() {
     humburger_icon.style.visibility = visible;
  }

  click_icon();
})

【讨论】：

谢谢他的回答

【解决方案2】：

如果您的 javascript 位于 <div id="menu-icon"> 之前，您必须使用 DOMContentLoaded 事件：

#menu-icon {
  width: 1em;
  height: 1em;
  background-color: pink;
}

<script>
  document.addEventListener('DOMContentLoaded', (e) => {
    let humburger_icon = document.getElementById('menu-icon');
    let ul_nav_list = document.getElementById('ul-nav-list');

    humburger_icon.addEventListener("click", click_icon);

    function click_icon() {
      console.log(humburger_icon);
      humburger_icon.style.visibility = visible ? "visible" : "hidden";
    }
    var visible = true;
    click_icon();
  });
</script>

<div id="menu-icon">
  <div class="lines"></div>
  <div class="lines"></div>
  <div class="lines"></div>
</div>

【讨论】：

非常感谢，这就是解决方案。