Zvi Karp Zvi Karp - 4 months ago 126
HTML Question

getElementById in Polymer element

How can I use getElementById in a Polymer custom element?

Here is my element:

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../styles/shared-styles.html">

<dom-module id="bb-calendar">

<template>

<style is="custom-style" include="shared-styles"></style>

<div class="card">
<paper-toolbar>
<div title>Calendar</div>
</paper-toolbar>
<div id="hidene">
<div>this should be hidden</div>
</div>
</div>

</template>

<script>

Polymer({

is: 'bb-calendar',

ready: function() {
document.getElementById("hideme").style.display = 'none';
}

});

</script>

</dom-module>


When I run the code I get this error message:
Uncaught TypeError: Cannot read property 'style' of null


Obviously I'm doing something wrong but I don't know what.

Thanks,
Zvi

Answer

At first I'd search for the correct id

<div id="hidene">

should be

<div id="hideme">

Then I'd use

ready: function() {
  $.hideme.style.display = 'none';
}

of when the element is inside <template dom-if...> or <template dom-repeat>

ready: function() {
  $$('.hideme').style.display = 'none';
}   

In the end I'd use class binding and bind a class to the element and update a property to reflect that change and use CSS to set style.display

Polymer({

  is: 'bb-calendar',

  properties: {
      hiddenClass: String,
  }

  ready: function() {
    this.hiddenClass = 'hidden';
  }

});
<template>
  <style>
    .hidden { display:none;}    
  </style>
   ...
        <div class$="{{hiddenClass"}}>
            <div>this should be hidden</div>
        </div>
Comments