title: call a javascript function inside a div
body: <p>I would like to create a webpage which contains several divs each containing the same draw function with different implementation (like a generic interface). After loading the page I want to iterate through all the divs and call each draw function one after the other. </p>
  
  <p>My page so far looks like this:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"&gt;
    &lt;script language="javascript" type="text/javascript" src="jquery-1.8.2.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
    &lt;script type='text/javascript'&gt;
      $( document ).ready( function() {
        // Draw all slots
        $('div.slot').each(function(i, d) {
          console.log('slot found: ' + d.id);
          // d.draw() does not work
          draw();
        });
      });
    &lt;/script&gt;
  
    &lt;div class="slot" id="slot1"&gt;
      &lt;script type='text/javascript'&gt;
        function draw() {
          console.log('Here we draw a circle');
        };
      &lt;/script&gt;
    &lt;/div&gt;
  
    &lt;div class="slot" id="slot2"&gt;
      &lt;script type='text/javascript'&gt;
        function draw() {
          console.log('Here we do something totally different and draw a rectangle');
        };
      &lt;/script&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Unfortunately I don't know how to call the draw function of the selected div "d".
  Right now it only calls the last defined draw function.</p>
  
  <h2>Update:</h2>
  
  <p>Mind you that I can not combine the different draw methods into one which would get a parameter like shape handed in. The draw methods will be totally independent from each other.</p>