CODEWITHSUNDEEP
javascripthtmlpolymer
physicsboy
physicsboy

Reputation: 6326

toggle specific class on specific element - Polymer

I have a series of paper-input elements each with an iron-icon that is initially hidden until text is input etc.

<paper-input id="one" class="one" on-input="doFunction">
    <iron-icon suffix icon="clear" id="clearOne" class="clear"></iron-icon>
</paper-input>
<paper-input id="two" class="two" on-input="doFunction">
    <iron-icon suffix icon="clear" id="clearTwo" class="clear"></iron-icon>
</paper-input>

Is there any way of using JS such that I can make this happen?

I currently have the following JS:

doFunction : function(e) {
    if (e.currentTarget.value != '') {
        /* toggle the clear icon for that input only */
    } else {
        /* toggle the clear icon for that input only again */
}

Upvotes: 0

Views: 329

Answers (2)

tony19
tony19

Reputation: 138346

You could alternatively accomplish this with CSS (and no JavaScript), using an <iron-icon>.hidden attribute that is automatically set to true only when the <paper-input>.value property is empty:

<paper-input value="{{value1}}">
  <iron-icon hidden$="[[!value1]]"></iron-icon>
</paper-input>

Make sure to initialize the bound property so that the <iron-icon>.hidden attribute's binding is evaluated upon attachment:

Polymer({
  // ...
  properties: {
    value1: {
      type: String,
      value: ''  // initialize for data binding
    }
  }
});

Polymer 1 demo

Polymer 2 demo

Upvotes: 2

Pascal L.
Pascal L.

Reputation: 1259

Try it this way!

doFunction : function(e) {
    if (e.currentTarget.value != '') {
        Polymer.dom(e.currentTarget).querySelector('iron-icon').classList.remove('clear')
    } else {
        Polymer.dom(e.currentTarget).querySelector('iron-icon').classList.add('clear')
    }
}

Upvotes: 1

Related Questions