Google Closure onclick event not working

Question

I have the following button in a HTML file:

<button id="signupbutton" name="signup.submit" type="submit" class="btn">Sign up</button>

I am using pyramid and I include closure base and my script like this:

<script src="${request.static_url('app:javascripts/closure-library/closure/goog/base.js')}"></script>
<script>
  goog.require('goog.events');
  goog.require('goog.events.EventType');
  goog.require('goog.dom')
  goog.require('goog.dom.forms');
</script>

<script src="${request.static_url('app:javascripts/checks.js')}"></script>

In my javascript file checks.js I wrote:

var buton = goog.dom.getElement('signupbutton');

goog.events.listen(
    buton,
    goog.events.EventType.CLICK,
    function(e) {
        alert("Here");
    });

What I get in the console is a TypeError: src is null events.js:954 (var listenerMap = src[goog.events.LISTENER_MAP_PROP_];) and nothing happens, only the page reloads!

If I create the button using google closure it works! So I can't figure out what the problem is!

Answer 1

its seem because your button is not in the DOM when your javascript is executed.

You should execute your script only after the button's been loaded in the DOM.

TypeError: src is null events.js:954

Example : http://jsfiddle.net/zeroc00l/ZugNX/