CODEWITHSUNDEEP
javascripthtmlcssmaterial-design
PowerStat
PowerStat

Reputation: 3821

Material Design Web 1.0 quickstart problem with script module and onclick handler

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/material-components-web@latest/dist/material-components-web.css" rel="stylesheet"/>
        <script src="https://unpkg.com/material-components-web@latest/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?

Upvotes: 1

Views: 98

Answers (1)

Abhineet
Abhineet

Reputation: 632

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

Upvotes: 2

Related Questions