Cannot read property 'addEventListener' of null using Polymer iron-form example

Question

I'm using Polymer to create a form based on the iron-form template here: https://github.com/PolymerElements/iron-form/blob/master/demo/index.html using the formGet form. My code is:

<form is="iron-form" id="formGet" method="get" action="/"
 <paper-input name="name" label="* Name" required></paper-input> 
 <paper-input name="description" label="Description"></paper-input>

 <paper-button raised onclick="submitHandler(event)">Submit</paper-button>
 <paper-button raised onclick="resetHandler(event)">Reset</paper-button>
</form> 

<script>
 document.getElementById('formGet').addEventListener('iron-form-submit', display);

 function display(event) {
  var output = document.getElementById('output');
  output.innerHTML = JSON.stringify(event.detail);
 }
 function submitHandler(event) {
  Polymer.dom(event).localTarget.parentElement.submit();
 }
 function resetHandler(event) {
  Polymer.dom(event).localTarget.parentElement.reset();
 }
</script>

When I hit submit, I get the error: Cannot read property 'addEventListener' of null

Answer 1

Inside your script try wrapping your code with a

HTMLImports.whenReady(function(){ ... });