Javascript simple code not working on Content form

JavaScript
1

Howdy folks,

New to Javascript programming.

I was able to do decent javascript (getting refereces to various elements on a page and read attributes or set attributes)…but when I try to do same kind of programming in a content page, it misbehaves.

For example a have a table element on the content page and button. in the onclick event of the button control, I am getting the <td> element and change its colors. but for some reason instead of changing the color of just the <td> element, the entire content page as well as Master page changes.

can someone guide me please.

<%@ Page Title="" Language="C#" MasterPageFile="~/DMS.Master" AutoEventWireup="true" CodeBehind="Javascript_RetrievingByTagName.aspx.cs" Inherits="DMS.WebUI.Javascript_RetrievingByTagName" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
<script type="text/javascript">
    function changecolors() {

        var a1 = document.getElementsByTagName("td");

        var a1Length = a1.length;
        for (var i = 0; i < a1Length; i++) {
            a1[i].style.background = "#aaabba";
        }
   }

    </script>

<table id="mytable" border="1">
<tr>
    <td id="lefttd0">Left column</td>
    <td id="righttd0">Right column</td>
</tr>
<tr>
    <td id="lefttd1">Left column</td>
    <td id="righttd1">Right column</td>
</tr>
<tr>
    <td id="lefttd2">Left column</td>
    <td id="righttd2">Right column</td>
</tr>
</table>
<a href="#" onclick="return changecolors();">Click to Change Colors</a>

<input id="Button1" type="button" value="button" onclick="changecolors();"/>
</asp:Content>thanks
2

Sure thing.

It works for me when I place some appropriate parts in to an HTML page, so we need to find out what else may be interfering with things.

What is the HTML code of the page that’s rendered from your ASP code?