I get the error: Uncaught TypeError: humburger_icon is null

user_16010521 0
Viewed 113

I am trying to make this Humburger_icon clickable but I get the error message that the icon is null. The icon was created in html with divs. See code. Does anyone have an idea how I can get rid of the error?

icon:

Error: Uncaught TypeError: humburger_icon is null

[enter image description here][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>

Any suggestions please?

navbar icons css html javascript
2 Answers

It's possible that the DOM tree haven't loaded yet when you run your code. Try

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();
})
user_48824220

If your javascript located before <div id="menu-icon"> you must use DOMContentLoaded event:

#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>

user_29300380
Related