CODEWITHSUNDEEP
dompolymerpolymer-1.0
Alex Kimoto
Alex Kimoto

Reputation: 509

Weird reference error just inside app-drawer

I have problems referencing an element in app-drawer with JS. As long as my function is referencing an element outside of app-drawer, there is no problem. But whenever I want to change an element inside app-drawer, I am getting an 'undefined' TypeError for it. I have made a reduced bin here.

Steps to reproduce issue

<!doctype html>

<head>
  <meta charset="utf-8">
  <base href="http://polygit.org/polymer+:master/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link rel="import" href="iron-media-query/iron-media-query.html">
  <link rel="import" href="app-layout/app-drawer-layout/app-drawer-layout.html">
  <link rel="import" href="app-layout/app-drawer/app-drawer.html">
  <link rel="import" href="app-layout/app-scroll-effects/app-scroll-effects.html">
  <link rel="import" href="app-layout/app-header/app-header.html">
  <link rel="import" href="app-layout/app-header-layout/app-header-layout.html">
  <link rel="import" href="app-layout/app-toolbar/app-toolbar.html">
</head>

<body>

  <dom-module id="x-foo">
    <template>
      <style>
        app-drawer {
          background-color: green;
          color: blue;
        }
        span {
          font-size: 2rem;
          color: green
        }
        span:last-of-type {
          position: relative;
          font-size: 3.5rem;
          top: 1.5rem;
          left: .5rem;
          color: red
        }
        #headerList,
        #drawerList {
          display: none;
        }
        h1 {
          color: orange
        }
        h2 {
          color: blue;
        }
      </style>
      <iron-media-query query="max-width: 1024px" query-matches="{{smallScreen}}"></iron-media-query>
      <app-drawer-layout drawer-width="300px" fullbleed force-narrow>
        <app-drawer swipe-open opened="false">
          <div class="drawer-contents">
            <template is="dom-if" if=[[smallScreen]]>
              <h2>(this is app-drawer)</h2>
              <span>tap the glyph inside app-drawer:</span>
              <span on-tap="tapGlyph1">&#711;</span>
              <ul class="myList" id="drawerList">
                <li>Austria</li>
                <li>Switzerland</li>
                <li>Slovenia</li>
              </ul>
            </template>
          </div>
        </app-drawer>
        <app-header-layout>
          <app-header>
            <app-toolbar main-title>
              <h1 drawer-toggle>click to toggle drawer</h1>
            </app-toolbar>
            <h2>(this is app-header)</h2>
            <span>tap a glyph inside app-header:</span>
            <span on-tap="tapGlyph2">&#711;</span>
            <ul id="headerList">
              <li>Australia</li>
              <li>Switzerland</li>
              <li>Slovenia</li>
            </ul>
          </app-header>
        </app-header-layout>
      </app-drawer-layout>
    </template>
    <script>
      Polymer({
        is: 'x-foo',
        tapGlyph1: function() {
          this.$.drawerList.style.display = "block";
        },
        tapGlyph2: function() {
          this.$.headerList.style.display = "block";
        }
      });
    </script>
  </dom-module>

  <x-foo></x-foo>

</body>

Upvotes: 0

Views: 69

Answers (1)

a1626
a1626

Reputation: 2964

Problem is not app-drawer but dom-if. Elements/Markups inside dom-if or dom-repeat are generated dynamically and thus cannot be accessed using hash by id. In order to access them one need to use $$ selector which is equivalent to querySelector. You can read about it here

Changing code with

this.$$('#drawerList') should solve your issue

Upvotes: 1

Related Questions