Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

DOM, change <span> tag content... c# or js

Posted on 2014-07-19
19
Medium Priority
?
303 Views
Last Modified: 2014-07-20
Question: How the text included in a <span> tag could be modified via code?

C# or java script solution will work.

Thank you.
    <td class="yearLableL" ><span class="spanYear">2013 YTD</span>

    </td>

Open in new window


Here, using code "2013 YTD" will change to "2014 YTD" forlexample.
0
Comment
Question by:Mike Eghtebas
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 11
  • 8
19 Comments
 
LVL 13

Expert Comment

by:duncanb7
ID: 40206966
Is it what you want to start a code, please read the following javascript
The text will be changed from 2013 YTD to 2014 YTD after setTimeout time=1 second,

Hope understand your question completely.If not, please point it out
and also provide your problem code as attachment
Duncan
<html>
<meta http-equiv="Content-Type" content="text/html; charset=Big5">
<head>
<title>Title</title>
<style>
</style>

<script type="text/javascript">
function init()
{

window.setTimeout(function(){
document.getElementsByClassName('tap')[0].innerHTML='2014 YTD';
},1000);
}

</script>
<script type="text/javascript">
</script>
</head>
<body  onload="javascript:init()" >
<div class="tap">2013 YTD</div>
</body>
</html>

Open in new window

0
 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 40206980
Hi Duncan,

This is great.

This code has to run in two different occasions:

1. When a page just loads.
2. When the year (via a DropList changes). Below is the droplist html.

        <asp:DropDownList ID="cboYear" runat="server"  Width="83">
            <asp:ListItem Text="2013" Value="2013" />
            <asp:ListItem Text="2014" Value="2014" />
        </asp:DropDownList>

Open in new window


I suppose, an event has to be added to this tag to handle the 2nd part. And the 1st part I remember from the past there was an event runs when a page uploads. You probably know both with no hesitation.

If so, I appreciate the additional help.

Regards,

Mike
0
 
LVL 13

Expert Comment

by:duncanb7
ID: 40206985
I just answered what you wrote in question post, and now I don't understand
what you want. Could you write it in step by step for task input requirement/condition and output requirement/condition at what language such as ASP, Javascript or C# so other experts could help on that


Duncan
0
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 40206991
I am using c#, asp.net.

For now staying with the original question, I included the code you gave me. It has not worked for me yet partially because you are referring to name 'tap' I do not have:

document.getElementsByClassName('tap')[0].innerHTML='2014 YTD';

so, I added  id="spanYearR"

<td class="yearLableR" ><span class="spanYear" [b]id="spanYearR"[/b]>2013 YTD</span></td>

Open in new window



and changed your code to:

<script type="text/javascript">
    function init() {

        window.setTimeout(function () {
            document.getElementsByID('spanYearR')[0].innerHTML = '2014 YTD';
        }, 1000);
    }

</script>

Open in new window


Please comment on this revised code because still is not working.

Thank you,

Mike
0
 
LVL 13

Expert Comment

by:duncanb7
ID: 40206993
tap is just example only for classname
0
 
LVL 13

Expert Comment

by:duncanb7
ID: 40206995
id is unique and no such as [0] format,
classname can be the same in many tags
id is unique only for one tag, if more tag with the same id
, only top tag with id  will be affected or updated depend on
the browser type.


try this
function init()
{

window.setTimeout(function(){
//document.getElementsByClassName('spanYear')[0].innerHTML='2014 YTD';
document.getElementById('spanYearR').innerHTML='2014 YTD';
},1000);
}
0
 
LVL 13

Expert Comment

by:duncanb7
ID: 40206998
getElementById not getElementsById

Duncan
0
 
LVL 13

Accepted Solution

by:
duncanb7 earned 2000 total points
ID: 40207000
Please take a look into it
<html>
<meta http-equiv="Content-Type" content="text/html; charset=Big5">
<head>
<title>Title</title>
<style>

</style>

<script type="text/javascript">
function init()
{

window.setTimeout(function(){
//document.getElementsByClassName('spanYear')[0].innerHTML='2014 YTD';
document.getElementById('spanYearR').innerHTML='2014 YTD';
},1000);
}

</script>
<script type="text/javascript">
</script>
</head>
<body  onload="javascript:init()" >

<table><tr>
<td class="yearLableL" ><span class="spanYear" id="spanYearR">2013 YTD</span></td>
</tr></table>
</body>
</html>

Open in new window

0
 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 40207008
Thank you so much for the time and effort. I am out of luck so far. I removed the timer and ran:
	float:left;  
}
</style>
<script type="text/javascript">
    function init() {

       // window.setTimeout(function () {
            document.getElementsByClassName('spanYear')[0].innerHTML='2014 YTD';
           document.getElementById('spanYearR').innerHTML = '2014 YTD';
     //   }, 1000);
    }
</script>
</head>
<body>

Open in new window


It hasn't work so far.

Consider:
	float:left;  
}
</style>
<script type="text/javascript">
    function init() {
          updateYear();   //<-- not sure about the syntax
    }

  function updateYear(){
          document.getElementsByClassName('spanYear')[0].innerHTML='2014 YTD';
           document.getElementById('spanYearR').innerHTML = '2014 YTD';
 }
</script>
</head>
<body>
.
.
.also updateYear() is to be called when a year value changes via the following droplist:


        <asp:DropDownList ID="cboYear" runat="server"  Width="83" OnChange="updateYear();">
            <asp:ListItem Text="2013" Value="2013" />
            <asp:ListItem Text="2014" Value="2014" />
        </asp:DropDownList>

Open in new window


I am not sure about the OnChange="updateYear();"> part.

BTW, I added alert("is running"); through out your code; I don't know where I have messed it up.

Mike
0
 
LVL 13

Expert Comment

by:duncanb7
ID: 40207012
Could you send us complete page or code and write down what you need ?

Duncan
0
 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 40207015
Here is the complete code: (for what I want to accomplish please see my last post)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PercentageForm.aspx.cs" 

Inherits="ASPChartComparision.PercentageForm" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
<style type="text/css">
body {
	text-align:center;
	background:rgb(64,64,64);
}
.fontAndBackgroundColor {
	color:white;
	/*border: 2px solid yellow;*/
	background:transparent;
}
.clear {
	clear:both;
}
.leftForm {
	width:412px;
	min-height:20px;
		float:left; 
} /*
.capationForm 
{
   text-align:left;
	width:412px;
	min-height:20px;
    float:left;    
    background-color:yellow;
   top:0px;

}
.capationSideForm {
	width:180px;
	min-height:20px;
    float:right;
    top:0px;
    left:0px;
}*/
.gap {
	width:8px;
	min-height:20px;
    float:left;
}
.hgap {
	width:1050;
	height:40px;
    float:left;
    background
}/*
.formCaptions {
	width:412px;
	min-height:20px;

}	*/
.rightForm {
	width:412px;
	min-height:20px;
    float:left;
}	


.annual 
{
	width:180px;
	min-height:20px;
    float:left;
}
.leftButton {
	width:319px;
	min-height: 60px;
	left:0px;
	float:left; 
}
.rightButton {
	width:319px;
	min-height: 60px;
	float:left; 
}
.middleButton {
	width:200px;
	min-height: 60px;
	float:left; 
}
.empty {
	width:160px;
	min-height: 60px;
	float:left; 
	/*border:1px solid grren;*/
}
.controls {
	width:1020px;
	min-height: 20px;
	float:left;
     text-align: left;

    }
    
    .table {
	width:1120px;
	/*border-bottom-color:Yellow;*/
    }
  .Panel3,  .optRollup {
display:inline-block;
background: transparent;
border:1px solid gray;
height:19px;
    margin:0px 0px 0px 0px;
}
.yearLableL, .yearLableR
{
    width:100px;
	min-height:30px;
   /* float:left;
    left:0px;
    background-color:White;*/
    float:left;
    background-color:White;
    border-bottom-width:10px;
    border-bottom-color:rgb(64,64,64);
    
    
}
.metricLableL, .metricLableR
{
    width:295px;
	min-height:30px;
	background-color:rgb(159,140,183);
   /* float:left;
    left:0px;
    background-color:White;*/
    float:left;
    margin:auto auto auto 5px;
    color:White;
}
.captionAnnual
{
    width:188px;
	min-height:30px;
	background-color:rgb(159,140,183);
    float:left;
    margin:auto auto auto 15px;
    color:White;
}
#yearLableL,  #yearLableR
{

 border-color:transparent;
  background-color:transparent;
  color:0;
  left:0px;
  margin:3px auto auto auto;
   font-size:20px;
  font-weight: bold;
  font-family:Arial;
}
.spanMetric {
  font-size:20px;
  font-weight: bold;
  font-family:Arial;
}
.spanYear
{
   font-size:18px;
  font-weight: bold;
  font-family:Arial; 
  color :0;  
}
#metricLableL, #metricLableR
{
   /*background-color:rgb(159,140,183);*/
   border-color:transparent;

   color:White;
   width:270px;
   height:20px;

 /* font-size:16px;
  font-weight: bold;
  font-family:Arial;
  
  
  
  
  
  border:1px solid green;*/
  padding:5px auto auto auto;
  margin:0px 20px auto 0px;
}  
#annualmetric
{
   background-color:Gray;
  font-size:20px;
  font-weight: bold;
  font-family:Arial;
}   
.CriteriaCaptionsLeft{
	width:120px;
	min-height: 20px;
	float:left; 
    text-align: left;
}

.CriteriaGeneral, .CriteriaDefault, .CriteriaSide, .CriteriaRight, .CriteriaLeft  {
	width:90px;
	min-height: 20px;
	float:left;  
}
</style>
<script type="text/javascript">
    function init() {

       // window.setTimeout(function () {
            document.getElementsByClassName('spanYear')[0].innerHTML='2014 YTD';
           document.getElementById('spanYearR').innerHTML = '2014 YTD';
     //   }, 1000);
    }
</script>
</head>
<body>

<form id="form1" runat="server">
<table border="0" class="table">
<tr >
    <td class="yearLableL" ><span class="spanYear">2013 YTD</span>
      <!--   <asp:TextBox ID="yearLableL" runat="server">2013 YTD</asp:TextBox>-->
    </td>
       <td class="metricLableL"><span class="spanMetric">Metric Name</span>
       <!--  <asp:TextBox ID="metricLableL" runat="server">Metric Name</asp:TextBox>-->
    </td>
    <td class="gap"></td>
    <td class="yearLableR" ><span class="spanYear" id="spanYearR">2013 YTD</span>
      <!--   <asp:TextBox ID="yearLableR" runat="server">2013 YTD</asp:TextBox>-->
     </td>
       <td class="metricLableR"><span class="spanMetric">Metric Name</span>
      <!--  <asp:TextBox ID="metricLableR" runat="server">Metric Name</asp:TextBox>-->
    </td>
    <td class="gap"></td>
    <td class="captionAnnual"><span class="spanMetric">Metric Name</span>
    
    </td>
    
</tr>
        <tr>
            <td  class="leftForm">
                <asp:GridView ID="gwRightForm" runat="server" AutoGenerateColumns="False" 
                        BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" 
                        CellPadding="4" DataKeyNames="MedCtrID" DataSourceID="LeftFormSQL" 
                        Font-Names="Arial" Font-Size="Small" ForeColor="Black" 
                    GridLines="Vertical">
                <AlternatingRowStyle BackColor="White" />
                <Columns>
                <asp:BoundField DataField="Med_Center" HeaderText="Med Ctr" ReadOnly="True" 
                    SortExpression="Med_Center">
                <ItemStyle HorizontalAlign="Left" Width="72px" Wrap="False" />
                </asp:BoundField>
                <asp:BoundField DataField="LastYearCount" DataFormatString="{0:F0}" 
                    HeaderText="2013" SortExpression="LastYearCount">
                <ItemStyle Wrap="False" />
                </asp:BoundField>
                <asp:BoundField DataField="01" DataFormatString="{0:F0}" HeaderText="01" 
                    SortExpression="01">
                <ItemStyle Wrap="False" />
                </asp:BoundField>
                <asp:BoundField DataField="02" DataFormatString="{0:F0}" HeaderText="02" 
                    SortExpression="02" />
                <asp:BoundField DataField="03" DataFormatString="{0:F0}" HeaderText="03" 
                    SortExpression="03" />
                <asp:BoundField DataField="04" DataFormatString="{0:F0}" HeaderText="04" 
                    SortExpression="04" />
                <asp:BoundField DataField="05" DataFormatString="{0:F0}" HeaderText="05" 
                    SortExpression="05" />
                <asp:BoundField DataField="06" DataFormatString="{0:F0}" HeaderText="06" 
                    SortExpression="06" />
                <asp:BoundField DataField="07" DataFormatString="{0:F0}" HeaderText="07" 
                    SortExpression="07" />
                <asp:BoundField DataField="08" DataFormatString="{0:F0}" HeaderText="08" 
                    SortExpression="08" />
                <asp:BoundField DataField="09" DataFormatString="{0:F0}" HeaderText="09" 
                    SortExpression="09" />
                <asp:BoundField DataField="10" DataFormatString="{0:F0}" HeaderText="10" 
                    SortExpression="10" />
                <asp:BoundField DataField="11" DataFormatString="{0:F0}" HeaderText="11" 
                    SortExpression="11" />
                <asp:BoundField DataField="12" DataFormatString="{0:F0}" HeaderText="12" 
                    SortExpression="12" />
                </Columns>
                <FooterStyle BackColor="#CCCC99" />
                <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
                <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
                <RowStyle BackColor="#F7F7DE" Width="25px" Wrap="False" />
                <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
                <SortedAscendingCellStyle BackColor="#FBFBF2" />
                <SortedAscendingHeaderStyle BackColor="#848384" />
                <SortedDescendingCellStyle BackColor="#EAEAD3" />
                <SortedDescendingHeaderStyle BackColor="#575357" />
                </asp:GridView>
            </td>
            <td class="gap">
            </td>
            <td class="rightForm">
                <asp:GridView ID="gwLeftForm" runat="server" AutoGenerateColumns="False" 
                    BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" 
                    CellPadding="4" DataKeyNames="MedCtrID" DataSourceID="LeftFormSQL" 
                    Font-Names="Arial" Font-Size="Small" ForeColor="Black" GridLines="Vertical" 
                    Width="400px">
            <AlternatingRowStyle BackColor="White" />
            <Columns>
                <asp:BoundField DataField="Med_Center" HeaderText="Med Ctr" ReadOnly="True" 
                    SortExpression="Med_Center">
                <ItemStyle HorizontalAlign="Left" Width="72px" Wrap="False" />
                </asp:BoundField>
                <asp:BoundField DataField="LastYearCount" DataFormatString="{0:F0}" 
                    HeaderText="2013" SortExpression="LastYearCount">
                <ItemStyle Width="72px" Wrap="False" />
                </asp:BoundField>
                <asp:BoundField DataField="01" DataFormatString="{0:F0}" HeaderText="01" 
                    SortExpression="01">
                <ItemStyle Width="25px" Wrap="False" />
                </asp:BoundField>
                <asp:BoundField DataField="02" DataFormatString="{0:F0}" HeaderText="02" 
                    SortExpression="02" />
                <asp:BoundField DataField="03" DataFormatString="{0:F0}" HeaderText="03" 
                    SortExpression="03" />
                <asp:BoundField DataField="04" DataFormatString="{0:F0}" HeaderText="04" 
                    SortExpression="04" />
                <asp:BoundField DataField="05" DataFormatString="{0:F0}" HeaderText="05" 
                    SortExpression="05" />
                <asp:BoundField DataField="06" DataFormatString="{0:F0}" HeaderText="06" 
                    SortExpression="06" />
                <asp:BoundField DataField="07" DataFormatString="{0:F0}" HeaderText="07" 
                    SortExpression="07" />
                <asp:BoundField DataField="08" DataFormatString="{0:F0}" HeaderText="08" 
                    SortExpression="08" />
                <asp:BoundField DataField="09" DataFormatString="{0:F0}" HeaderText="09" 
                    SortExpression="09" />
                <asp:BoundField DataField="10" DataFormatString="{0:F0}" HeaderText="10" 
                    SortExpression="10" />
                <asp:BoundField DataField="11" DataFormatString="{0:F0}" HeaderText="11" 
                    SortExpression="11" />
                <asp:BoundField DataField="12" DataFormatString="{0:F0}" HeaderText="12" 
                    SortExpression="12" />
                </Columns>
                <FooterStyle BackColor="#CCCC99" />
                <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
                <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
                <RowStyle BackColor="#F7F7DE" Width="25px" Wrap="False" />
                <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
                <SortedAscendingCellStyle BackColor="#FBFBF2" />
                <SortedAscendingHeaderStyle BackColor="#848384" />
                <SortedDescendingCellStyle BackColor="#EAEAD3" />
                <SortedDescendingHeaderStyle BackColor="#575357" />
                </asp:GridView>
                <asp:SqlDataSource ID="LeftFormSQL" runat="server" 
                    ConnectionString="<%$ ConnectionStrings:ROD_July18ConnectionString %>" 
                    SelectCommand="spPercentageForm" SelectCommandType="StoredProcedure">
                <SelectParameters>
                    <asp:Parameter DefaultValue="101" Name="Metric_ID" Type="Int32" />
                    <asp:Parameter DefaultValue="2013" Name="YYYY" Type="String" />
                    <asp:Parameter DefaultValue="1" Name="RegionID" Type="Int32" />
                </SelectParameters>
                </asp:SqlDataSource>
            </td>
    <td class="gap">
    </td>
    <td class="annual fontAndBackgroundColor">
   <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
            DataKeyNames="StatTypeID" DataSourceID="SideFormSQL"  Width="180px" 
            BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" 
            CellPadding="4" Font-Names="Arial" Font-Size="Small" ForeColor="Black" 
            GridLines="Vertical">
            <AlternatingRowStyle BackColor="White" />
            <Columns>
                <asp:BoundField DataField="LastYearCount" HeaderText="2013" 
                    SortExpression="LastYearCount" DataFormatString="{0:n0}" >
                <ItemStyle HorizontalAlign="Right" />
                </asp:BoundField>
                <asp:BoundField DataField="CurrYearCount" HeaderText="2014" 
                    SortExpression="CurrYearCount" DataFormatString="{0:n0}" >
                <ItemStyle HorizontalAlign="Right" />
                </asp:BoundField>
                <asp:BoundField DataField="IncreaseOverLastYear" HeaderText="%" 
                    SortExpression="IncreaseOverLastYear" DataFormatString="{0:F0}" />
            </Columns>
            <FooterStyle BackColor="#CCCC99" />
            <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
            <RowStyle BackColor="#F7F7DE" />
            <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
            <SortedAscendingCellStyle BackColor="#FBFBF2" />
            <SortedAscendingHeaderStyle BackColor="#848384" />
            <SortedDescendingCellStyle BackColor="#EAEAD3" />
            <SortedDescendingHeaderStyle BackColor="#575357" />
            </asp:GridView>
            <asp:SqlDataSource ID="SideFormSQL" runat="server" 
                ConnectionString="<%$ ConnectionStrings:ROD_July18ConnectionString %>" 
                SelectCommand="spAuunuaCountMedCtr" SelectCommandType="StoredProcedure">
             <SelectParameters>
                        <asp:Parameter DefaultValue="2" Name="StatType_ID" Type="Int32" />
                        <asp:Parameter DefaultValue="2013" Name="YYYY" Type="String" />
                        <asp:Parameter DefaultValue="1" Name="RegionID" Type="Int32" />
                    </SelectParameters>
                </asp:SqlDataSource>
            </td>
	</tr>
    <tr class="controls fontAndBackgroundColor">
        <td>
        <asp:Label 
            ID="Label4" runat="server" Text="Region:" 
            style="font-family: Arial; font-size: small" Height="22px"></asp:Label>
        <asp:DropDownList ID="cboRegion" runat="server" Width="83">
            <asp:ListItem Text="Region 1" Value="1" />
            <asp:ListItem Text="Region 2" Value="2" />
            <asp:ListItem Text="Region 3" Value="3" />
        </asp:DropDownList>&nbsp&nbsp&nbsp&nbsp
        <asp:Label ID="Label5" runat="server" Text="Data Year:" 
            style="font-size: small; font-family: Arial" Height="22px"></asp:Label>
        <asp:DropDownList ID="cboYear" runat="server"  Width="83">
            <asp:ListItem Text="2013" Value="2013" />
            <asp:ListItem Text="2014" Value="2014" />
        </asp:DropDownList>
        &nbsp&nbsp&nbsp&nbsp
             <asp:Label ID="Label6" runat="server" Text="Rollup:"  style="font-size: small; font-family: Arial" Height="22px"></asp:Label>
            <asp:Panel ID="optRollup" Class="optRollup" runat="server"  >
            <asp:RadioButton ID="RadioButton1" name="Rollup" Text="Monthly" runat="server"  style="font-family: Arial; font-size: small" GroupName="Rollup" />&nbsp
           <asp:RadioButton ID="RadioButton2"  name="Rollup" Text="YTD" Checked="true" runat="server"  style="font-family: Arial; font-size: small" GroupName="Rollup"/>&nbsp&nbsp
        </asp:Panel>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
              <asp:Label ID="Label7" runat="server" Text="Location:"  style="font-size: small; font-family: Arial" Height="22px"></asp:Label>
<asp:Panel ID="Panel3" Class="Panel3" runat="server"  >
             <asp:RadioButton ID="RadioButton3"  name="location" Text="SA" runat="server" style="font-family: Arial; font-size: small"  GroupName="Location" />
             <asp:RadioButton ID="RadioButton4" name="location" Text="Med Ctr" Checked="true" runat="server" style="font-family: Arial; font-size: small" GroupName="Location" />
            <asp:RadioButton ID="RadioButton5" name="location" Text="MOB" runat="server" style="font-family: Arial; font-size: small" GroupName="Location" />&nbsp&nbsp
            <asp:RadioButton ID="RadioButton6" name="location" Text="RA" runat="server" style="font-family: Arial; font-size: small"  GroupName="Location" />&nbsp&nbsp
        </asp:Panel>
        </td>
       <td class="leftButton fontAndBackgroundColor">
                    <asp:Panel ID="Panel1" runat="server" GroupName="optLeft">
                     <asp:Button ID="Button1" Name="opt" runat="server" Text="1" Height="30px" 
                            Width="103px" TabIndex="1"  />
                     <asp:Button ID="Button2" Name="opt" runat="server" Text="3" Height="30px" 
                            Width="103px" TabIndex="3" />
                     <asp:Button ID="Button3" Name="opt" runat="server" Text="5" Height="30px" 
                            Width="103px" TabIndex="5" /><br />
                     <asp:Button ID="Button4" Name="opt" runat="server" Text="2" Height="30px" 
                            Width="103px" TabIndex="2" />
                     <asp:Button ID="Button5" Name="opt" runat="server" Text="4" Height="30px" 
                            Width="103px" TabIndex="4" />
                     <asp:Button ID="Button6" Name="opt" runat="server" Text="6" Height="30px" 
                            Width="103px" TabIndex="6" />
                 </asp:Panel>
    </td>
	<td class="middleButton fontAndBackgroundColor">
         <img src="images/Button.png" width="200px" height="60px" />
        <!-- <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>-->
    </td>
 	<td class="rightButton right fontAndBackgroundColor">
                <asp:Panel ID="Panel2" runat="server">
                     <asp:Button ID="Button7" runat="server" Text="7" Height="30px" 
                         Width="103px" TabIndex="7" />
                     <asp:Button ID="Button8" runat="server" Text="9" Height="30px" 
                         Width="103px" TabIndex="9" />
                     <asp:Button ID="Button9" runat="server" Text="11" Height="30px" 
                         Width="103px" TabIndex="11" /><br />
                     <asp:Button ID="Button10" runat="server" Text="8" Height="30px" 
                         Width="103px" TabIndex="8" />
                     <asp:Button ID="Button11" runat="server" Text="10" Height="30px" 
                         Width="103px" TabIndex="10" />
                     <asp:Button ID="Button12" runat="server" Text="12" Height="30px" 
                         Width="103px" TabIndex="12" />
                 </asp:Panel>   
    </td>
  <td class="empty " >

   </td>
</tr>
<tr class="controls">
<td></td>
</tr>
<tr>
<td class="CriteriaCaptionsLeft fontAndBackgroundColor">
    <asp:Label ID="Label1" runat="server" Text="Criterial type:"></asp:Label><br />
    <asp:Label ID="Label2" runat="server" Text="Region ID"></asp:Label><br />
    <asp:Label name="MetricLeft" ID="Label3" runat="server" Text="Metric/Stat ID"></asp:Label><br />
    <asp:Label ID="YYYY" runat="server" Text="YYYY"></asp:Label>
</td>
<td class="CriteriaLeft fontAndBackgroundColor">      
    <asp:TextBox ID="criterialtype_Left" runat="server" Height="14px" ></asp:TextBox>
    <asp:TextBox ID="metricId_Left" runat="server" Height="14px" ></asp:TextBox>
    <asp:TextBox ID="regionId_Left" runat="server" Height="14px" ></asp:TextBox>
    <asp:TextBox ID="yYYYRight_Left" runat="server" Height="14px" ></asp:TextBox>
    </td>
    <td class="CriteriaRight fontAndBackgroundColort">      
        <asp:TextBox ID="criterialtype_Right" runat="server" Height="14px" ></asp:TextBox>
        <asp:TextBox ID="metricId_Right" runat="server" Height="14px" ></asp:TextBox>
        <asp:TextBox ID="regionId_Right" runat="server" Height="14px" ></asp:TextBox>
        <asp:TextBox ID="yYYYRight_Right" runat="server" Height="14px" ></asp:TextBox>
    </td>
    <td class="CriteriaSide fontAndBackgroundColor">      
         <asp:TextBox ID="criterialtype_Side" runat="server" Height="14px"></asp:TextBox>
        <asp:TextBox ID="metricId_Side" runat="server" Height="14px" ></asp:TextBox>
        <asp:TextBox ID="regionId_Side" runat="server" Height="14px" ></asp:TextBox>
        <asp:TextBox ID="yYYYRight_Side" runat="server" Height="14px" ></asp:TextBox>
    </td>
    <td class="CriteriaGeneral fontAndBackgroundColor">      
            <asp:TextBox ID="criterialtype_General" runat="server" Height="14px" ></asp:TextBox>
            <asp:TextBox ID="metricId_General" runat="server" Height="14px" ></asp:TextBox>
            <asp:TextBox ID="regionId_General" runat="server" Height="14px" ></asp:TextBox>
            <asp:TextBox ID="yYYYRight_General" runat="server" Height="14px" ></asp:TextBox>
    </td>
    <td class="CriteriaDefault fontAndBackgroundColor">      
            <asp:TextBox ID="criterialtype_Default" runat="server" Height="14px" ></asp:TextBox>
            <asp:TextBox ID="metricId_Default" runat="server" Height="14px" ></asp:TextBox>
            <asp:TextBox ID="regionId_Default" runat="server" Height="14px" ></asp:TextBox>
            <asp:TextBox ID="yYYYRight_Default" runat="server" Height="14px" ></asp:TextBox>
        </td>
        </tr>
    </table>
    </form>

</body>
</html>

Open in new window

0
 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 40207020
I think the problem is elsewhere, I tired this code. It is not working. I guess I need to enable js in my browser:

<script type="text/javascript">
    function init() {
        alert('Hello, World!')
    }
</script>

Open in new window


Mike
0
 
LVL 13

Expert Comment

by:duncanb7
ID: 40207021
try this
 onChange="javascript:updateYear();"
Duncan
0
 
LVL 13

Expert Comment

by:duncanb7
ID: 40207022
Supposed there is option select on each browser (FF/IE/Chrome) for javascript enable

Duncan
0
 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 40207026
I have good and bad news.

Good news is that

onChange="javascript:updateYear();"

along with

<script type="text/javascript">
    function init() {
        alert('Hello, World 1!')
    }
    function updateYear() {
        alert('Hello, World 2!')
    }
</script>

updateYear() works. I also included           document.getElementsByClassName('spanYear')[0].innerHTML='2014 YTD'; in it, it updates the innerHtnl okay.

The bad news is that init() is not working.

Mike
0
 
LVL 13

Expert Comment

by:duncanb7
ID: 40207032
Where you call init() ? I did not see it. You can delete init() if it is not
useful.
0
 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 40207038
Remember I wrote about:

1. When a page just loads.
2. When the year (via a DropList changes). Below is the droplist html.

the 2nd part you solved it by onChange="javascript:updateYear();" instruction.

But, the 1st part is to be handled by init().

Thank you for your help. I will close this question now. I will figure it out somehow why init() not working later.

Mike
0
 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 40207042
I got it.

I needed to include

window.onload = init;

also in my <javascript> tag because it was not included in my body tag

<body onload="javascript:init();"

Mike
0
 
LVL 13

Expert Comment

by:duncanb7
ID: 40207064
Be Reminded, I put it into <body onload="javascript:init();"> in previous post that works
when page loading is finished, it will call init();
 If you don't need it, just delete it

Thanks for your points

Have a nice day

Duncan
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

715 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question