Question

In Web application, I write JavaScript for mouseover and mouseout for a button to change the color. It is not working when button is in datalist control, it is working fine when button is outside of datalist control. This is my code, please help me.

  <script type="text/javascript" >
function changeImage() 
{       
    document.getElementById("btnView").style.background = "#AD1F13";
}

function changeImage1()
{
   document.getElementById("btnView").style.background = "#005594";
} 
</script>

<asp:DataList ID="dtlstMagazine" class='tableborder'    runat ="server" Width ="100%" 
          onitemdatabound="dtlstMagazine_ItemDataBound" 
          onitemcommand="dtlstMagazine_ItemCommand">
       <ItemTemplate >
            <div style="text-align:left; " class="item-title"  >
 <asp:LinkButton Font-Underline ="false"   ID="ltrlTitle"   CommandName="Redirect"  CommandArgument='<%# Eval("titleid") %>' Font-Bold ="true" Font-Size ="Medium"         runat="server" Text ='<%# Eval("Title") %>'></asp:LinkButton> 
                                      </div>                            
             <asp:Button ID="Btn_CR1" runat="server" Text="Continue Reading"   CssClass='button3'  onMouseOver="changeImage()" onMouseOut="changeImage1()" />  </ItemTemplate>  </asp:DataList>

Answer 1

Actually you need a reference to buttons inside list to change their attribute. You can do this by changing your javascript method to:

function changeImage(obj) 
{       
    obj.style.background = "#AD1F13";
}

and your aspx to:

<asp:Button ID="Btn_CR1" runat="server" Text="Continue Reading"   CssClass='button3'  onMouseOver="changeImage(this)" onMouseOut="changeImage1(this)" />