Click event is not working between the toggle bar

Question

I have this HTML:

<button type="button" class="navbar-toggle" onclick="showNav();">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

I have this JS:

function showNav() {
    document.getElementById("dropdown").classList.toggle("show");
}

and this CSS:

.navbar-toggle {
    margin-top: 15px;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    position: absolute;
    z-index: 100;
    padding: 0;
    height: auto;
    &:focus {
        outline: 0;
    }
    .icon-bar {
        background-color: #fff;
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 1px;
        background-color: #4F4644;
        margin-bottom: 4px;
        // &:before {
        //     content: "";
        //     height: 2px;
        //     background-color: #000000;
        //     width: 22px;
        //     margin-top: 5px;
        //     position: absolute;
        //     left: 0;
        //     top: -11px;
        // }
        // &:after {
        //     content: "";
        //     height: 2px;
        //     background-color: #000000;
        //     width: 22px;
        //     margin-top: 6px;
        //     position: absolute;
        //     left: 0;
        // }
    }
}

It looks like this:

Now, when I click on this, I am adding the .show class and then it's showing the .dropdown-container div which contain the menu items.

Now, sometimes it's not showing the .dropdown-container container because of the gap between the toggle.

How can I implement the click event on the gap too?

Suggestion: Avoid handlers on view. Instead add listeners using an initializer function from JS. **[Reference](https://stackoverflow.com/questions/5871640/why-is-using-onclick-in-html-a-bad-practice)** — Rajesh, Nov 24 '20 at 03:41

TheoNeUpKID · Answer 1 · 2020-11-24T03:54:28.677

0

The problem is that dropdown id does not exist. Not adding it would throw an exception when attempting to toggle. "Uncaught TypeError: Cannot read property 'classList' of null" NOTE It has been added below.

function showNav() {
    document.getElementById("dropdown").classList.toggle("show");
}

.navbar-toggle.show {
    background-color: red;
}
.navbar-toggle {
    margin-top: 15px;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    position: absolute;
    z-index: 100;
    padding: 0;
    height: auto;
    &:focus {
        outline: 0;
    }
}
  .icon-bar {
        background-color: #fff;
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 1px;
        background-color: #4F4644;
        margin-bottom: 4px;
        // &:before {
        //     content: "";
        //     height: 2px;
        //     background-color: #000000;
        //     width: 22px;
        //     margin-top: 5px;
        //     position: absolute;
        //     left: 0;
        //     top: -11px;
        // }
        // &:after {
        //     content: "";
        //     height: 2px;
        //     background-color: #000000;
        //     width: 22px;
        //     margin-top: 6px;
        //     position: absolute;
        //     left: 0;
        // }
}

<button type="button" class="navbar-toggle" id="dropdown" onclick="showNav();">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>

UPDATE If you are trying to toggle a class then you'll need to add the show for example: NOTE navbar-toggle for lack of a better word is coupled with the show, which can be toggled.

.navbar-toggle.show {
  background-color: red;
}
.navbar-toggle {
}

edited Nov 24 '20 at 03:54

answered Nov 24 '20 at 03:35

TheoNeUpKID

763
7
11

Let me try with this. – Shibbir Nov 24 '20 at 03:38
Minor suggestion: Add some style in your code for `.show`. This way if any reader click on it, they will see visible change and will not require to open dev tools just to validate it – Rajesh Nov 24 '20 at 03:39
@TheoNeUpKID still, when I click on the gap it's not working – Shibbir Nov 24 '20 at 03:42
@TheoNeUpKID `.show` class is already added using my JS code. and I have the `show` class already to make the `dropdown-container` as `block` but still between the toggle icon the click event is not working. – Shibbir Nov 24 '20 at 04:32
@Shibbir do you have a repo or could you include the snippet for rendering. – TheoNeUpKID Nov 24 '20 at 04:34
I have a repo but it's not password protected. I can share the full heder area code at here: https://codeshare.io/21do8z – Shibbir Nov 24 '20 at 04:37
Mmm.. I don't know you understand the issue or not. Please check this image: https://prnt.sc/voul8j. On this gap click event is not working. – Shibbir Nov 24 '20 at 04:49
1

Guess, keep at it. Here's a resource which should help. https://www.w3schools.com/howto/howto_js_mobile_navbar.asp – TheoNeUpKID Nov 24 '20 at 05:23

Click event is not working between the toggle bar

1 Answers1