How to create a click event for polymer-based webpage

Apologies in advanced, but I'm a complete noob at Polymer.

So far I've done an HTML file (treated as external dialog box), with some stuff in it.

First off, the user clicks a button from the main page, which then displays a dialog box. From the dialog box, the user will type in text (at this point, anything), and then click on the submit button. At which point, either it succeeds, or if the textbox is empty, an error is thrown, the textbox is selected, and (if possible) turns red / displays an error message.

Unfortunately, even getting the polymer event down escapes me.

Here's my code so far:

The main page (works fine):

<!DOCTYPE HTML>
<html>
<head>
    <link rel="import" href="elements/accountability-ticket.html"/>
</head>
<body>
    <section>
        <paper-button raised label="Buy Now" id="ticket" onclick="clickHandler('diagTicket')">Buy Now</paper-button>
    </section>
    <section><accountability-ticket></accountability-ticket></section>
    <script>
    window.addEventListener('WebComponentsReady', function(e) {
      // imports are loaded and elements have been registered
      console.log('Components are ready');
    });


    function clickHandler(e) {
        var dialog = document.getElementById(e);
        if (dialog) {
            dialog.open();
        }
    }
    </script>
</body>
</html>

There's a button there, "Buy Now", which calls the below code as a pop-up dialog form:

<dom-module id="accountability-ticket">
    <template>
        <paper-dialog with-backdrop entry-animation="scale-up-animation"
                      exit-animation="fade-out-animation" id="diagTicket">
            <h2>I Own It Ticket </h2>
            <div class="ctrlButtons flex">  
                <paper-button dialog-dismiss>Cancel</paper-button>
                <paper-button dialog-confirm>Submit</paper-button>
            </div>
        </paper-dialog>
    </template>
</dom-module>
<script>
Polymer({
    is: "accountability-ticket"
});

</script>

According to my searches online, to get the button to check if the textbox is empty on click, I'll need an eventHandler first and foremost. I understand I'm supposed to put something like this:

on-click="confirmClick"

in the <paper-button dialog-confirm>Submit</paper-button>.

And presumably in the <script> part, this:

Polymer('my-element', {
    confirmClick: function() {
    alert('Click event triggered');
});

But given that I already have this:

Polymer({
    is: "accountability-ticket"
});

above, and so far my attempts at putting confimClick in it results in the entire dialog box not appearing when the user clicks the "Buy Now", I'm not sure what to do.

For now, how do I setup the click event? Thanks.

Solution

To register event handlers, remove the double braces.

<paper-button on-click="confirmClick">Confirm</paper-button>

Update

Thanks for the update. I now realise that you are trying to set up the click handler on your main page outside of a Polymer element. The syntax above only works inside <dom-module>. You can however use the "traditional" approach for setting up event handlers.

window.addEventListener('WebComponentsReady', function(e) {
  // imports are loaded and elements have been registered
  document.querySelector("#ticket").addEventListener("click", clickHandler);
});

function clickHandler(e) {
    // your code here
}

Update

If on the other hand you are inside a Polymer element, you can add the event handler to the prototype. The id in the dom-module where the handler is registered must match the is property in the prototype (in this case accountability-ticket). So assuming that your module looks like this:

<dom-module id="accountability-ticket">
    <template>
        <paper-button on-click="confirmClick">Confirm</paper-button>
    </template>
</dom-module>

You add the handler to the prototype in the following way:

<script>
    Polymer({
        is: "accountability-ticket",
        confirmClick: function(event){
            console.log(event);
        }
    });

</script>>