In my code javascript is not working properly with asp.net?

Question

I have used a asp datalist with feedback form for news website but javascript is not working correctly and the mouse hover and onclick functions are not working so this is the code--

<%@ Page Title="" Language="C#" MasterPageFile="~/admin.master" enableEventValidation="false" AutoEventWireup="true" CodeFile="Dtalist.aspx.cs" Inherits="Dtalist" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

    <style type="text/css">
          .Empty
        {
            background: url("../Empty.gif") no-repeat right top;
        }
        .Empty:hover
        {
            background: url("../Filled.gif") no-repeat right top;
        }
        .Filled
        {
            background: url("../Filled.gif") no-repeat right top;
        }
        .auto-style1 {
            width: 100%;
            height: 814px;
        }
        .auto-style2 {
            height: 77px;
        }
        .auto-style3 {
            height: 142px;
        }
        .auto-style4 {
            height: 188px;
        }
        .auto-style5 {
            height: 200px;
        }
    </style>
    <script type="text/javascript">

        function Decide(option) {
            var temp = "";
            document.getElementById('lblRate').innerText = "";
            if (option == 1) {
                document.getElementById('Rating1').className = "Filled";
                document.getElementById('Rating2').className = "Empty";
                document.getElementById('Rating3').className = "Empty";
                document.getElementById('Rating4').className = "Empty";
                document.getElementById('Rating5').className = "Empty";
                temp = "1-Poor";
            }
            if (option == 2) {
                document.getElementById('Rating1').className = "Filled";
                document.getElementById('Rating2').className = "Filled";
                document.getElementById('Rating3').className = "Empty";
                document.getElementById('Rating4').className = "Empty";
                document.getElementById('Rating5').className = "Empty";
                temp = "2-Ok";

            }
            if (option == 3) {
                document.getElementById('Rating1').className = "Filled";
                document.getElementById('Rating2').className = "Filled";
                document.getElementById('Rating3').className = "Filled";
                document.getElementById('Rating4').className = "Empty";
                document.getElementById('Rating5').className = "Empty";
                temp = "3-Fair";
            }
            if (option == 4) {
                document.getElementById('Rating1').className = "Filled";
                document.getElementById('Rating2').className = "Filled";
                document.getElementById('Rating3').className = "Filled";
                document.getElementById('Rating4').className = "Filled";
                document.getElementById('Rating5').className = "Empty";
                temp = "4-Good";
            }
            if (option == 5) {
                document.getElementById('Rating1').className = "Filled";
                document.getElementById('Rating2').className = "Filled";
                document.getElementById('Rating3').className = "Filled";
                document.getElementById('Rating4').className = "Filled";
                document.getElementById('Rating5').className = "Filled";
                temp = "5-Nice";
            }
            document.getElementById('lblRate').innerText = temp;
            var hdnfldVariable = document.getElementById('hdnfldVariable');
            hdnfldVariable.value = temp;
            return false;
        }

    </script>
    <div>
      <asp:HiddenField ID="hdnfldVariable" runat="server" />
        <asp:DataList ID="DataList1" runat="server" BackColor="White" BorderColor="#666666" BorderWidth="4px" Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False" Font-Underline="False" GridLines="Vertical" RepeatColumns="3" RepeatDirection="Horizontal" OnItemCommand="DataList1_ItemCommand" OnItemDataBound="DataList1_ItemDataBound" >
            <FooterStyle BackColor="#8C4510" Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False" Font-Underline="False" ForeColor="#F7DFB5" />
            <HeaderStyle BackColor="#333333" Font-Bold="True" Font-Italic="False" Font-Overline="False" Font-Size="XX-Large" Font-Strikeout="False" Font-Underline="False" ForeColor="White" HorizontalAlign="Center" VerticalAlign="Middle" />
            <HeaderTemplate>
                Latest News
            </HeaderTemplate>
            <ItemTemplate>
                <table class="auto-style1">
                    <tr>
                        <td class="auto-style2">
                            <asp:Label ID="Label1" runat="server" BackColor="Silver" BorderColor="#FF9900" Font-Bold="True" Font-Size="Large" Font-Underline="True" Text='<%# Eval("news") %>'></asp:Label>
                            <asp:Label ID="Label3" runat="server" Text='<%# Eval("nid") %>' Visible="False"></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td class="auto-style3">
                            <asp:Image ID="Image1" runat="server"  ImageUrl='<%# Eval("photo","~/img/{0}") %>' Width="200px" Height="500px"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="auto-style4">
                            <asp:Label ID="Label2" runat="server" BackColor="#CCCCCC" Font-Size="Medium" Text='<%# Eval("description") %>'></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td class="auto-style5">
                            <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" >Please login first!</asp:TextBox>

                            <asp:Button ID="Button1" runat="server" BackColor="#7AC1FF" Enabled="False" ForeColor="#333333" Text="COMMENT" CommandName="Comment" />

    <asp:Button BorderStyle="None" ID="Rating1" onmouseover="return Decide(1);" OnClientClick="return Decide(1);"
        Height="20px" Width="20px" CssClass="Empty" runat="server" />
    <asp:Button BorderStyle="None" ID="Rating2" onmouseover="return Decide(2);" OnClientClick="return Decide(2);"
        Height="20px" Width="20px" CssClass="Empty" runat="server" />
    <asp:Button BorderStyle="None" ID="Rating3" onmouseover="return Decide(3);" OnClientClick="return Decide(3);"
        Height="20px" Width="20px" CssClass="Empty" runat="server" />
    <asp:Button BorderStyle="None" ID="Rating4" onmouseover="return Decide(4);" OnClientClick="return Decide(4);"
        Height="20px" Width="20px" CssClass="Empty" runat="server" />
    <asp:Button BorderStyle="None" ID="Rating5" onmouseover="return Decide(5);" OnClientClick="return Decide(5);"
        Height="20px" Width="20px" CssClass="Empty" runat="server" />
    <br />
    <br />
    <asp:Label ID="lblRate" runat="server" Text=""></asp:Label>

                            <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Button" />

                        </td>
                    </tr>
                </table>
            </ItemTemplate>
        </asp:DataList>



    </div>

</asp:Content>

With backend as--

 protected void Button2_Click(object sender, EventArgs e)
    {
        string variable = hdnfldVariable.Value;
        Response.Write("<script>alert('"+variable+"');</script>");
}

I think there is a problem with referencing the datalist items...

Answer 1

Your javascript is trying to reference the controls by the ids such as "lblRate" and "Rating1" etc.

The problem is that these controls are Runat="Server" and even more, it is within a Asp DataList. Once rendered onto the client's screen, the controls will be given unique ID's, something on the lines of DataList1_ctl00_lblRate. To see what it render's out as, just view the html page source from your browser after the page is rendered.

getElementById needs to specify the correct ID from the result html, and not what you put on the ID field in the control. It is why asp controls have a property called ClientID to help you get the id that will actually be rendered on the html.

Assuming that you would like your javascript to work with how ever many elements in the DataList, you should change it to be relative to the button clicked and have other forms of identifying the control you want to target.

An example would be to include the use of jQuery, and use css classes to navigate the rendered list relative to the button clicked

first add a class to the row so that you can find it

<table class="auto-style1">
        <tr class="jq-data-list-row">
            <td class="auto-style2">

Then add a class to the elements you want to identify and remember that the triggering element should pass in itself so that the javascript can have a reference point to start

<asp:Button  ID="Rating1" OnClientClick="return Decide(this, 1);" CssClass="Empty jq-rating-1-button" runat="server" />

then the js can be modified to something similar to the below (I've only included enough code to demonstrate the idea):

function Decide(button, option) {
    var temp = "";
    // get the closest parent with the css class of '.jq-data-list-row'
    var $row = $(button).closest('.jq-data-list-row');
    // find a child of the row with the css class of '.jq-rating-1-button'
    var $Rating1 = $row.find('.jq-rating-1-button');

    if (option == 1) {
        $Rating1.addClass("Filled");
        .
        .
        .
    }

    return false;
}