Javascript help

How do i call a javascript function inside of a div tag?
I searched online to no avail.

I have a div tag for A-Z, each representing their own page and I want each of them to run their own javascript function. I tried everything. Ideas?


<div data-role="page" id="Z" onLoad="showImage()">
   <div data-role="header" data-theme="a">
     <h1>'Nova Teachers : Z's</h1>
   </div>
   <div data-role="content">       
     <p>hi</p>
   </div>
 </div>

How about a complete testcase?

Wasn't it "javascript:alert()" back in 2000?

Try something like that.

onLoad="javascript:showImage()"

or a single dot, or javascript:OBJECT.showImage()...

First off, you're totally misusing data tags. This is what classes and IDs are for. Use them.

<div id="Z" class="page">
  <div class="header">
    <h1>'Nova Teachers : Z's</h1>
  </div>
  <div class="content">
    <p>hi</p>
  </div>
</div>

I'm going to use jQuery. For several reasons. First it makes everything with the DOM much easier, not just for this but for everything else. Secondly it'll make the code necessary to do this specific task much shorter. Thirdly everyone else is using it and so should you if you want to be cool.

$(document).ready(function() {
  $(".page content").showImage();
});

This is assuming that showImage looks something like this:

$.fn.extend({
  showImage: function() {
    $(this).before("<img src='get_your_image_uri_somehow_here' />");
};

Of course this brings up the question, why are you doing this? Are the images randomly pulled or something? Are you using some sort of AJAX to get the image URI from the server because you can't insert it into the HTML server side for some reason? If not why not just insert the image in the div directly? If you're trying to make it fade in or something there's much better ways to go about this.