javascript - Change one of many toggle button label with same function - Polymer -


i have bunch of paper-toggle-buttons wanting have label display current state.

i can work enough on 1 button, wanting have them point 1 function code cleaner.

i have code, both toggle @ same time??? it's js wrong.

enter image description here

polymer({    is: 'example-element',    properties: {      labeltext: {        type: string,        value: 'false'      }    },    checktoggle: function(e) {      var togglebutton = e.currenttarget.getattribute('input');      this.$$('#' + togglebutton).checked ? this.labeltext = "true" : this.labeltext = "false";    },  });
<base href="https://polygit.org/polymer+polymer+v1.9.0/components/" />  <script src="webcomponentsjs/webcomponents-lite.js"></script>  <link rel="import" href="paper-toggle-button/paper-toggle-button.html" />    <example-element></example-element>    <dom-module id="example-element">    <template>      <paper-toggle-button input="paper-toggle1" id="paper-toggle1" on-click="checktoggle">{{labeltext}}</paper-toggle-button>      <paper-toggle-button input="paper-toggle2" id="paper-toggle2" on-click="checktoggle">{{labeltext}}</paper-toggle-button>    </template>  </dom-module>

no point using custom property this, may change dom directly. 1 way of doing it.

polymer({    is: 'example-element',    properties: {      labeltext: {        type: string,        value: 'false'      }    },    checktoggle: function(e) {      e.currenttarget.queryselector(".label").innerhtml = e.currenttarget.checked == true;    },  });
<base href="https://polygit.org/polymer+polymer+v1.9.0/components/" />  <script src="webcomponentsjs/webcomponents-lite.js"></script>  <link rel="import" href="paper-toggle-button/paper-toggle-button.html" />    <example-element></example-element>    <dom-module id="example-element">    <template>      <paper-toggle-button input="paper-toggle1" id="paper-toggle1" on-click="checktoggle"><span class="label">false</span></paper-toggle-button>      <paper-toggle-button input="paper-toggle2" id="paper-toggle2" on-click="checktoggle"><span class="label">false</span></paper-toggle-button>    </template>  </dom-module>


Comments

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

vue.js - Create hooks for automated testing -

Add new key value to json node in java -