title: Attaching change() even listeners to select/dropdown dynamically
body: <p>I'm creating 3 dropdowns/select boxes on the fly and insert them in the DOM through .innerHTML.</p>
  <p>I don't know the ID's of the dropdowns until I created them in Javascript.
  To know which dropdowns have been created, I create an array where I store the ID's of the dropdowns I have created.</p>
  <pre><code>for(var i=0; i&lt;course.books.length; i++)
  {
    output+=&quot;&lt;label for='book_&quot;+course.books[i].id+&quot;'&gt;&quot;+ course.books[i].name +&quot;&lt;/label&gt;&quot;;
    output+=&quot;&lt;select id='variant&quot;+course.books[i].id+&quot;' name='book_&quot;+course.books[i].id+&quot;'&gt;&quot;;
    output+=&quot;&lt;option value='-'&gt;-- Select one --&lt;/option&gt;&quot;;
    for(var j=0; j&lt;course.books[i].options.length; j++)
    {
        output+=&quot;&lt;option value='&quot;+course.books[i].options[j].id+&quot;'&gt;&quot;+course.books[i].options[j].name+&quot;&lt;/option&gt;&quot;;
    }
    output+=&quot;&lt;/select&gt;&quot;;
  }
  </code></pre>
  <p>Now I have an array with 3 id's like:</p>
  <ul>
  <li>dropdown1</li>
  <li>dropdown2</li>
  <li>dropdown3</li>
  </ul>
  <p>What I want to accomplish with Javascript (without using jQuery or another framework) is to loop over these 3 dropdowns and attach a change event listener to them.</p>
  <p>When a user changes the selection in one of these dropdown, I want to call a function called <code>updatePrice</code> for example.</p>
  <p>I'm a bit stuck on the dynamic adding of event listeners here.</p>