Error in console while hiding the link on click through Polymer/Dom - dom

Question

Hi Stack Overflowians,
I want to hide the Click foo link when I click the same Click foo link.
I have the following code:
<dom-module>
<div id="foo">
Click foo
</div>
<script>
Polymer({
is: 'test-file',
toggle_visibility: function(id) {
var e = document.getElementById(id);
if (e.style.display === "none") {
e.style.display = "block";
} else {
e.style.display = "none";
}
});
</script>
</dom-module>
I get the error in Console tab when I click on Click foo link:
Uncaught ReferenceError: toggle_visibility is not defined at HTMLAnchorElement.onclick
I want the link to hide when clicked on Click foo link
Can anyone please help ?
Thanks in advance

Answer 1

In Polymer you declaratively add event handlers by using on- + the event name. So in your case that would be on-click, not onclick.
Also, you will need to provide the name for a method, not to call it. So your a tag would become something like:
Click foo
Since that doesn't pass a paramter you can find another way, like using a data- attribute, or maybe if the relationship to the anchor is the same every time just rely on the fact that the div is the parent node:
toggle_visibility: function(event) {
var e = event.currentTarget.parentNode;
if (e.style.display === "none") {
e.style.display = "block";
} else {
e.style.display = "none";
}
}
UPDATE: also note that, if you go by using a method that would query for the element to toggle the display for, you will most likely have to query the shadowDom, not the document level. So
var e = document.getElementById(id);
would become:
var e = this.shadowRoot.getElementById(id);