Polymer, paper-button, sending arguments on-tap works but sometime not

Question

I have several buttons like bellow, all wrapped dom-if template as bellow.

<teplate is="dom-if" if="{{google}}">
   <paper-button on-tap='_signIn' arg="#google">...<div></div><paper-button>
</template>
.....
<paper-button on-tap='_signIn' arg="#facebook">...<div></div><paper-button>
<paper-button on-tap='_signIn' arg="#twitter">...<div></div><paper-button>

......
_signIn: function(e) {
 console.log(e.target.getAttribute("arg"));
 }

Due to value of argument, I will need to sign in/up with its own credential. I clicked randomly to those buttons, and result are sometimes :null. Console log is something like below:

#google
#facebook
#google
null
null
null
#facebook
#facebook
#facebook
#twitter
null

So need stable results. Any help or suggestion will be much appreciated.

Answer 1

Clicking on the div inside paper-button will result in null obviously.. because div has no arg attribute and calling e.target returns div. You should display paper-button without any child elements like:

<paper-button on-tap='_sigIn' arg="#google">Click me</paper-button>

or making a function that will loop throught parents until it finds the given attribute. For this i am using:

getAttr: function(e,attr) {
    elem = e.target;

    while (elem.parentNode != undefined) {
        if (elem.getAttribute(attr) != undefined) {
            return elem.getAttribute(attr);
        }
        elem = elem.parentNode;
    }
},

so, your function _signIn can looks like:

_sigIn: function(e) {
   var value = this.getAttr(e, "arg");
   console.log(value);
}