I am trying to get a jumpstart with Material Design Web 1.0 from March 2019.

But I have a problem at the beginning:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8"/>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' https://fonts.gstatic.com; script-src 'unsafe-inline' https://unpkg.com; style-src 'unsafe-inline' https://unpkg.com https://fonts.googleapis.com"/>
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Test</title>

        <link href="https://unpkg.com/[email protected]/dist/material-components-web.css" rel="stylesheet"/>
        <script src="https://unpkg.com/[email protected]/dist/material-components-web.js"></script>
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
    
        <script type="module">
          const menu = mdc.menu.MDCMenu.attachTo(document.querySelector('.mdc-menu'));
          menu.open = false;
        </script>
      </head>
      <body>
        <header class="mdc-top-app-bar mdc-top-app-bar--fixed mdc-menu-surface--anchor">
          <div class="mdc-top-app-bar__row">
            <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
              <a href="#" class="material-icons mdc-top-app-bar__navigation-icon" onclick="menu.open = !menu.open;">menu</a>
              <span class="mdc-top-app-bar__title">Test</span>
            </section>
            <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
            </section>
          </div>
          <div class="mdc-menu mdc-menu-surface" tabindex="-1">
            <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical">
              <li class="mdc-list-item" role="menuitem"><span class="mdc-list-item__text">Homepage</span></li>
              <li class="mdc-list-item" role="menuitem"><span class="mdc-list-item__text">Imprint</span></li>
              <li class="mdc-list-item" role="menuitem"><span class="mdc-list-item__text">Data privacy statement</span></li>
            </ul>
          </div>
        </header>

      </body>
    </html>

My problem ist, that for the onclick="menu.open = !menu.open;" the browsers console tolds me that it is undefined. Thats because of the <script type="module">. But when removing the type="module" then the content of the script tag throws an error that there is something undefined.

So my question is:

Whats the correct way (when using the quickstart with unpkg.com - see Getting Started) to open/close a menu within an onclick handler?

1 Answers

2
Abhineet On

this is the variable's scope issue. In the type='module' variables don't automatically get declared globally like normal script. You have to attach them to the window object manually. Below both options can resolve your issue.

manually attached to the window

    <script type="module">
          window.menu = mdc.menu.MDCMenu.attachTo(document.querySelector('.mdc-menu'));
          window.menu.open = false; 
          window.toggleMenu = function () { window.menu.open = !window.menu.open }
    </script>

    <a href="#" class="material-icons mdc-top-app-bar__navigation-icon" id="button" onclick="toggleMenu();">menu</a>

Second Option: instead of onclick, use addEventListener

by adding Event Listener

<script type="module">    
  const menu = mdc.menu.MDCMenu.attachTo(document.querySelector('.mdc-menu')); 
        menu.open = false;
  document.getElementById('toggleButton').addEventListener('click', () => menu.open = !menu.open);
</script>

hope helps you...