Trying to work with Polymer paper-toggle-button

Question

Sorry if this is a dumb question but I'm trying to figure out how to use paper-toggle-button to make an element appear/disappear on my page.

I can make it work by simply using onclick but this is obviously not right/ideal and I can't find any examples online of it being used (for web).

The toggle button is deployed (without the onclick='toggleShow'()) as:

<paper-toggle-button onchange={{toggleShow}} checked></paper-toggle-button>

The script I've tried (and failed with) is:

function toggleShow() {
  if (checked: false) {
    chart.hide('upload'); //this works with onclick
  } else {
    chart.show('upload');
  }
}

I'm sure this is a bit of a dumb question, but any help to get me going in the right direction would be really appreciated

Answer 1

var toggle = document.querySelector("paper-toggle-button");
toggle.addEventListener('change', function () {
  if (this.checked) {
    // do something if when checked
  } else {
    // do something if not checked
  }
}); 

the above code will check for the "change" event that is fired when the toggle gets user interaction and will check the state of the button.

if you were going to use this in a custom element you could wrap it in the ready function. you would give the toggle a id (in this case i used toggle) so you can select it with polymers quick select.

ready: function () {
  this.$.toggle.addEventListener('change', function () {
    if (this.checked) {
      // do something if when checked
    } else {
      // do something if not checked
    }
  }); 
}

edit: didn't notice on first posting that op used onchange attribute so you can ignore the part about the event listener and just use the named function as OP posted. just need to correct the logic.

second edit: here is a plunker with examples of both methods on-change attribute and also eventlistener. http://plnkr.co/edit/3tn3C2GpgKQY9bkzCt0L?p=preview

op used onchange in place on on-change which might have been a root of the issue to begin with.

Answer 2

I think property binding is a more idiomatic way to approach it, something like this:

<paper-toggle-button checked="{{showChart}}"></paper-toggle-button>

<div id="chart" hidden$="[[!showChart]]">...</div>