How to call javascript function in item template when using gridview

Question

I am trying to call a javascript function which will set forecolor and backcolor of a control when the control is loaded

But this function is not raising.

<ItemTemplate>
      <div onload= "invertColor(this,'<%# Eval("ColorCode") %>')">
           <%# Eval("ColorCode") %>
      </div>
</ItemTemplate>

Here is my javascript

    function invertColor(sender, backColor) {
        alert('hi');
//        alert(backColor.toString());
//        if (backColor != '') {
//        
//            sender.css('background-color', backColor);
//            backColor= backColor.substr(1, 6);
//            foreColor = numberToHex(255 - parseInt(backColor.substr(0, 2), 16))
//            + numberToHex(255 - parseInt(backColor.substr(2, 2), 16))
//            + numberToHex(255 - parseInt(backColor.substr(4, 2), 16));
//            sender.css('color', "#"+foreColor)
//        }
    }

Answer 1

Yeah, that's not going to work because there's no onload event on a div. Why not just set an appropriate CSS class?

Answer 2

you can do it immediately after the div if the element has some way to address it, like and id or css class. making the div a server control will produce a unique id for each item in the collection.

<ItemTemplate> 
      <div runat="server" id="dummy"> 
           <%# Eval("ColorCode") %> 
      </div> 
    <script> invertColor('<% =dummy.ClientID %>', '<%# Eval("ColorCode") %>'); </script>
</ItemTemplate> 

here i've changed the first parameter to a string instead of an object. inside invertColor you can use the id string to get a reference to the element however you see fit.

Answer 3

Using in-line style

<ItemTemplate> 
  <div style= "color:<%# Eval("ColorCode") %>"> 
       <%# Eval("ColorCode") %> 
  </div> 
</ItemTemplate> 

might be an alternative solution.