Set Polymer paper-badge label with JavaScript

Question

Set Polymer paper-badge label with JavaScript

128 views Asked by yglodt At 13 October 2024 at 21:26

How can I set the label of a paper-badge with JavaScript?

I have tried this but is does not work:

Polymer.dom(document.getElementById("id_of_tag")).label = "5";

A more complete code snippet is here:

<script type="text/javascript">
var socket = new WebSocket(((window.location.protocol === "https:") ? "wss://" : "ws://") + window.location.host + "/ws");
stompClient = Stomp.over(socket); stompClient.debug = null;
stompClient.connect({}, function(frame) {
    stompClient.subscribe("/user/queue",
        function(m, h) {
            response = JSON.parse(m.body);
            badge = Polymer.dom(document.getElementById("notificationsLabel"));
            badge.label = "5";
        } ,{ "id" : "${currentUserId}" }
    );
}, function(e) {
    console.log("openWebSocket error", e);
});
</script>

<!-- a lot more stuff -->

<paper-badge id="notificationsLabel" for="notifications" label="0"></paper-badge>

Original Q&A

There are 1 answers

**a1626** · Accepted Answer · 2016-12-15 14:03:37

If you are trying to set it inside a Polymer element prefer

this.$.id.label

or if it's inside a dom-repeat or dom-if

this.$$('#id').label

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-badge/paper-badge.html">
<dom-module id="accessing-element">
  <template>
    <style>
      .myDiv {
        width: 250px;
        height: 40px;
        border: 1px solid black;
        margin-bottom: 30px;
      }
    </style>
    <div id="insideBadge" class="myDiv">badge inside element</div>
    <paper-badge for="insideBadge" id="insideOwnDom" label="1"></paper-badge>
    <div on-tap="_changeLabel">Click me to change all labels</div>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'accessing-element',
    _changeLabel: function() {
      this.$.insideOwnDom.label = 2;

      var docLevel = document.getElementById('inSameDoc');
      docLevel.label = 3;

      var anotherElement = document.querySelector('another-element');
      var ele = Polymer.dom(anotherElement.root);
      var badge = ele.getEffectiveChildNodes()[3];
      badge.label = 4;
      // or
      //            anotherElement.label= 4;
    }
  })
</script>


<dom-module id="another-element">
  <template>
    <style>
      .myDiv {
        width: 250px;
        height: 40px;
        border: 1px solid black;
        margin-bottom: 30px;
      }
    </style>
    <div id="anotherELementsBadge" class="myDiv">badge inside another element</div>
    <paper-badge id="anotherElementsDom" for="anotherELementsBadge" label="{{label}}"></paper-badge>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'another-element',
    properties: {
      label: {
        type: Number,
        value: 1
      }
    }
  })
</script>


<html>

<head>
  <meta charset="UTF-8">
  <title>Change labels</title>
</head>

<body>
  <style>
    .myDiv {
      width: 250px;
      height: 40px;
      border: 1px solid black;
      margin-bottom: 30px;
    }
  </style>
  <div style="height:100px;"></div>
  <div id="docBadge" class="myDiv">badge at same doc level</div>
  <paper-badge for="docBadge" id="inSameDoc" label="1"></paper-badge>
  <another-element></another-element>
  <accessing-element></accessing-element>
</body>

</html>

TechQA.

Set Polymer paper-badge label with JavaScript

There are 1 answers

Related Questions in POLYMER

Related Questions in PAPER-BADGE

Popular Questions

Popular Tags

Trending Questions