JavaScript assigns a value to label control text value?

[Guest]

I have developed a web form by using visual Studio. My question is:
(1) what is the problem?
(2) what is right way to do it?

In the form, there are labels with id:
lblWear, lblColor, and lblQuality.
Now I need to assign values to those label dynamically.
I have JavaScript:
function regTriples(id){
if (id==1){
document.Form1.lblWear.value="Shirt";
document.Form1.lblColor.value="Brown";
document.Form1.lblQuality.value="Honesty";
}
else if (id==2){
document.Form1.lblWear.value="Shoes";
document.Form1.lblColor.value="Black";
document.Form1.lblQuality.value="Modesty";
}
else if (id==3){
document.Form1.lblWear.value="Socks";
document.Form1.lblColor.value="Blue";
document.Form1.lblQuality.value="Charity";

}


}

When I click button which enables the JavaScript and assign those perdefined
values to the Labels, I got error from the bottom coner of the webbrowser IE:
"document.Form1.lblWear.value is null or not an object"


The following HTML code is from the source of web browser, which is
generated by web form .aspx file on the server. The default values have been
assigned when label control created on the webform.


<span id="lblWear" style="font-size:12pt;Z-INDEX: 160; LEFT: 32px; POSITION:
absolute; TOP: 232px">Shirt</span><span id="lblColor"
style="font-size:12pt;Z-INDEX: 161; LEFT: 32px; POSITION: absolute; TOP:
256px">Brown</span><span id="lblQuality" style="font-size:12pt;Z-INDEX: 162;
LEFT: 32px; POSITION: absolute; TOP: 280px">Honesty</span>


Thanks

David

 

[Wayne]

Use getElementByID('') like this:

document.getElementById('<%=lblWear.ClientID%>').value = 'Shirt';

<%=lblWear.ClientID%> this will get you the "real" id of the control after
INamingContainer get finished with it.

We use this all the time, works like a champ.

-Wayne

 

[Guest]

Thank you.

I will try it.

David

Use getElementByID('') like this:

document.getElementById('<%=lblWear.ClientID%>').value = 'Shirt';

<%=lblWear.ClientID%> this will get you the "real" id of the control after
INamingContainer get finished with it.

We use this all the time, works like a champ.

-Wayne

 

[Guest]

Hi, Wayne:

I have tried it. There is no error message, but the labels do not change.
Here is my JavaScript:
function regTriples(id){
if (id==1){

document.getElementById('<%=lblWear.ClientID%>').value='Shirt'
document.getElementById('<%=lblColor.ClientID%>').value='Brown'
document.getElementById('<%=lblQuality.ClientID%>').value='Honesty'
}
else if (id==2){

document.getElementById('<%=lblWear.ClientID%>').value='Shoes'
document.getElementById('<%=lblColor.ClientID%>').value='Black'
document.getElementById('<%=lblQuality.ClientID%>').value='Modesty'
}
else if (id==3){

document.getElementById('<%=lblWear.ClientID%>').value='Socks'
document.getElementById('<%=lblColor.ClientID%>').value='Blue'
document.getElementById('<%=lblQuality.ClientID%>').value='Charity'

}


}

and VB code for radio buttons in server side:

rbtnReg1.Attributes.Add("onClick", "regTriples(1)")
rbtnReg1.Checked = True
rbtnReg2.Attributes.Add("onClick", "regTriples(2)")
rbtnReg3.Attributes.Add("onClick", "regTriples(3)")

 

[Wayne]

The label write a span tag. Use .innerText instead of .value

FYI, you may want to return false at the end if you don't want the button to
cause a post back.

Changes for the return false to prevent postback and the .innerText are made
below.

Hope this helps.

-Wayne


function regTriples(id){
if (id==1){

document.getElementById('<%=lblWear.ClientID%>').innerText='Shirt'
document.getElementById('<%=lblColor.ClientID%>').innerText='Brown'
document.getElementById('<%=lblQuality.ClientID%>').innerText='Honesty'
}
else if (id==2){

document.getElementById('<%=lblWear.ClientID%>').innerText='Shoes'
document.getElementById('<%=lblColor.ClientID%>').innerText='Black'
document.getElementById('<%=lblQuality.ClientID%>').innerText='Modesty'
}
else if (id==3){

document.getElementById('<%=lblWear.ClientID%>').innerText='Socks'
document.getElementById('<%=lblColor.ClientID%>').innerText='Blue'
document.getElementById('<%=lblQuality.ClientID%>').innerText='Charity'

}

return false


}


rbtnReg1.Attributes.Add("onClick", "return regTriples(1);")
rbtnReg1.Checked = True
rbtnReg2.Attributes.Add("onClick", "return regTriples(2);")
rbtnReg3.Attributes.Add("onClick", "return regTriples(3);")

 

[Guest]

My button postback has been disabled.

I will try it

David

 

[Guest]

Thank you, Wayne.

It works!

I have a lot to learn.

Do you have good books or web sites to recommend for reading?

David

 

[Wayne]

I wished there was, the best site for this is GOOGLE.com and have 5 very
cleaver programmer and designers help. Google is our life saver.

Working with JavaScript and ASP.NET is a very difficult topic to find
information on. We searched a long time for that solution. It's not what
you do in ASP.NET that counts, it what ASP.NET does with what you did that
matters in the end.

Best of luck!

-Wayne

 

[Guest]

Thank you again, Wayne.

I have not been here for two days.
Yes, GOOGLE.COM makes this world easy to work on.
I am used to Yahoo, but now google is the best.

David