0

so this is the issue i have on my website

Uncaught TypeError: Cannot read property 'classList' of null at HTMLImageElement.

and this is my code

https://jsfiddle.net/kikiZ/59ej2g8m/

maybe there's another solution to fix this problem because i have looking on the other website but still didn't find the answer

and the problem on this code

        <script>

        var menu = document.getElementById('menu');
        var nav = document.getElementById('nav');
        var exit = document.getElementById('exit');

        menu.addEventListener('click', function(e) {
            nav.classList.toggle('hide-mobile');
            e.preventDefault();
        });

    </script>
Akash Shrivastava
  • 1,308
  • 5
  • 13
Kiki
  • 13
  • 1
  • 1
    change `document.getElementById('nav');` to `document.querySelector('nav');` – Dominik Matis Jan 02 '20 at 12:41
  • 1
    Do that @DominikMatis says, or give your nav an `id` of "nav" like this. ` – Marc Hjorth Jan 02 '20 at 12:44
  • You are asking for `getElementById('nav')` but you didn't provide id on ` – xaid Jan 02 '20 at 12:45
  • ok thx for the suggestion now i have change it like dominik says but now my navigation bar should show the home service etc and now nothing tho show am i wrong or there's something i miss it? – Kiki Jan 02 '20 at 12:57

2 Answers2

1

For fixing the toggle button on small screens

the solution: paste this code instead of your Javascript code and try to read it:

var menu = document.getElementById('menu');
var nav = document.querySelector('nav ul');
var exit = document.getElementById('exit');

menu.addEventListener('click', function(e) {
    nav.classList.toggle('hide-mobile');
    e.preventDefault();
});

Explain:

FIRST:

If you want to use classlist method, then you should have a class inside the HTML <nav> tag. what you're doing is that you're searching for a class inside nothing, because what getElementById('') does is that it searches inside the DOM (the HTML file) for an Id with the name that matches the passed argument; mean in your case: getElementById('nav') : it's searching for an #Id with the name of nav but you don't have. So you have to decide: you may use getElementById('') but you need to add an id with the name of nav to your <nav> tag; so <nav id="nav">.

or you may use document.querySelector('nav') instead of document.getElementById('nav').

SECOND

after fixing the first problem you'll see another one and it's that your toggle button on small screens is not working. That's because you're toggling the "hide-mobile" class on the <nav> and you don't want that, you want to toggle that class on the <ul> element because it's the element that contains the "hide-mobile" class by default.

  • the second issue is right sam, so how to solve the second issue – Kiki Jan 02 '20 at 13:51
  • Like I just said, replace your Javascript code with the code which I wrote for you, glad to help you. –  Jan 03 '20 at 06:25
0

You don't have any element with id "nav".

Change document.getElementById('nav'); to document.querySelector('nav') or add id nav to element nav

João Mendes
  • 11
  • 2