CODEWITHSUNDEEP
javascriptdom
user8551674
user8551674

Reputation: 183

Button created with document.createElement() to trigger onclick event, won't appear

This is my site (where the relevant HTML is).

I desire to make the main menu toggled when viewport is under or equal to 768px.

I aspire to do that only in vanilla JavaScript.

For this purpose, I wrote the following algorithm and code, which runs on DOMContentLoaded:

  1. If viewport is less than or equal to 786px, do:
  2. Select the main menu and display:none it.
  3. Create a button and give it a class.
  4. Append the button to (the end of) header.
  5. When the button is clicked, redisplay the menu.

My code:

document.addEventListener('DOMContentLoaded', ()=>{
    if (window.innerWidth <= 768) {
        let menu = document.querySelector(' #menu-mainmenu ');
        return menu.style.display = 'none';

        let newButton = document.createElement('div');
        newButton.className = 'menuButton';

        let myHeader = document.querySelector('#masthead');
        myHeader.appendChild(newButton);

        newButton.addEventListener('click', ()=>{
            return menu.style.display = 'block';
        });
    }
});

No errors in console in execution.

My question:

The problem seems to be that the button doesn't get created, i.e the createElement() method fails (a div with a class menuButton doesn't appear in the DOM). Why would it?

Upvotes: 0

Views: 1147

Answers (3)

ArthurG
ArthurG

Reputation: 345

For this you can use CSS Media Queries, I've added an example below, you need little jQuery code to do that.

Observation: I've edited my answer, now it shows the main menu after you click the button.

function hideButtonAndShowMenu() {
// Hides button
  document.getElementsByClassName('mobile-button')[0].style.display = 'none'   
  document.getElementsByClassName('yourMainMenuClass')[0].classList.toggle('show')
}
@media screen and (min-width: 769px) {
  .mobile-button {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .yourMainMenuClass:not(.show) {
    display: none;
  }
}
<header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <input type='button' onclick="hideButtonAndShowMenu()" class='mobile-button' value="Don't click me please :-("> </input>
</header>

<div class='yourMainMenuClass'>
  <h2> If you are seeing this, you're not on the mobile View!</h2>
      <h3> Try resizing this window :-) </h3>
</div>

Upvotes: 0

Quentin
Quentin

Reputation: 943207

    return menu.style.display = 'none';

    let newButton = document.createElement('div');

On the line before you create the element, you return.

returning will immediately end the function.

Don't return there.

This type of task is better handled with media queries though.

Upvotes: 1

Jonas Wilms
Jonas Wilms

Reputation: 138257

let myHeader = document.querySelector('#masthead');

This should get the element were we add the created one right? However theres a small problem: the site hasnt loaded yet. Im surprised that while your code looks quite ok ( wohoo, you use let ;) ) you did not notice the error in the console ( cannot get appendChild of undefined ) nor have you thought of wrapping everything in the DOMContentListener:

if (window.innerWidth <= 768) {
document.addEventListener('DOMContentLoaded', ()=>{
    let menu = document.querySelector(' #menu-mainmenu ');
    return menu.style.display = 'none';

    let newButton = document.createElement('div');
    newButton.className = 'menuButton';

    let myHeader = document.querySelector('#masthead');
    myHeader.appendChild(newButton);

    newButton.addEventListener('click', ()=>{
        return menu.style.display = 'block';
    });
});    
}

Upvotes: 1

Related Questions