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

x
?
Solved

Problem with DOM: Radio, checked and style

Posted on 2004-04-17
21
Medium Priority
?
1,288 Views
Last Modified: 2013-11-19
Hello, I have this piece of code, that adds two radio buttons dynamically with DOM.
I have some problems. First, it doesn't let me check them. I also can't dynamically check one of them as default. And When I try to add styles dynamically, I can't either (look at the // lines). I would like for example both words "option 1" and "Option 2" in red, and the second radio button moved to the right 150px.
I hope you can help me, thank you very much. ;)

<html>
<head>
<script>
function add() {
var obj = document.createElement("input");
obj.setAttribute("type", "radio");
obj.setAttribute("name", "option");
obj.setAttribute("value", "1");
document.frm.appendChild(obj);
obj = document.createTextNode("Option 1");
//obj.setAttribute("style", "color:red;")
document.frm.appendChild(obj);
var obj2 = document.createElement("input");
obj2.setAttribute("type", "radio");
obj2.setAttribute("name", "option");
obj2.setAttribute("value", "2");
//obj2.setAttribute("style", "position:relative; left:150px;");
document.frm.appendChild(obj2);
obj2 = document.createTextNode("Option 2");
//obj.setAttribute("style", "color:red;")
document.frm.appendChild(obj2);

}
</script>
</head>
<body>
<a href="javascript:add();">Add</a><br>
<form name="frm"></form>
</body>
</html>
0
Comment
Question by:DeLaVegaz
[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
  • 9
  • 9
  • 2
  • +1
21 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 10851076
option is not a great name and does
obj.setAttribute("checked", true);

not work?
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10851091
Here is a working example, see comments for explanations.

<html>
<head>
<script>
function add() {
var obj = document.createElement("input");
obj.setAttribute("type", "radio");
obj.setAttribute("name", "option");
//YOU ALSO HAVE TO SET THE ID, OR THE NAME WILL NOT BE SET
obj.setAttribute("id", "option");
obj.setAttribute("value", "1");

document.frm.appendChild(obj);
//THIS IS HOW YOU SET THE STYLE
//first create a font
var cont=document.createElement("font");
//now set the colour
cont.style.color="red";
//now set the text
var txt = document.createTextNode("Option 1");
//now add the text
cont.appendChild(txt);
document.frm.appendChild(cont);

var obj2 = document.createElement("input");
obj2.setAttribute("type", "radio");
obj2.setAttribute("name", "option");
obj2.setAttribute("id", "option");
obj2.setAttribute("value", "2");
//obj2.setAttribute("style", "position:relative; left:150px;");
document.frm.appendChild(obj2);
obj2 = document.createTextNode("Option 2");
//obj.setAttribute("style", "color:red;")
document.frm.appendChild(obj2);

//THIS IS HOW YOU SET IT CHECKED BY DEFAULT
//YOU MUST PUT THIS AT THE END
//obj.checked=true;
//OR...
obj.setAttribute("checked",true);
}
</script>
</head>
<body>
<a href="javascript:add();">Add</a><br>
<form name="frm"></form>
</body>
</html>
0
 

Author Comment

by:DeLaVegaz
ID: 10851093
Yes, anyway I don't call it "option" in my page, I just changed the name to post here and I didn't notice....
No, that doesn't work...
Thank you anyway ;)
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 12

Expert Comment

by:lil_puffball
ID: 10851099
Basically:

1) You cannot set the style of a text node, so you have to put the text in a container, like a font tag. You could also use span or div.
2) You cannot set the style by using: obj.setAttribute("style","color:red") you have to use: obj.style.color="red"
3) You must put the checked part at the very end.
0
 

Author Comment

by:DeLaVegaz
ID: 10851115
And what about the position (style)? How can I do it?
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10851124
Probably add a span before the radio buttons:

(Put this at the beginning of the function)

obj=document.createElement("span");
obj.style.width=150;
document.frm.appendChild(obj);
0
 

Author Comment

by:DeLaVegaz
ID: 10853750
Great, thank you a lot... ;)
Everything works except one thing...
I still can't check other options, I mean, for example, option 1 is checked by default, when I try to check option 2, nothing happens, I can't select it (I also try adding an option 3 and it's the same). All the options have the same name attribute, and at first different Ids (just for trying I put them the same id, but I suppose they should have different, anyway, it doesn't work).
I also try to left option 1 checked true by default, and the others checked false, but doesn't either.... :(
If I don't user the checked by default, I can't check none...
Hope you can help, thank you again....
0
 
LVL 3

Expert Comment

by:azcn2503
ID: 10853916
It's as if the name attribute doesn't work.
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10854016
Sorry, forgot about that. This will work:

<html>
<head>
<script>
function add() {
var obj = document.createElement("input");
if(document.all){obj=document.createElement("<input name='option'>");}
obj.setAttribute("type", "radio");
obj.setAttribute("name", "option");
//YOU ALSO HAVE TO SET THE ID, OR THE NAME WILL NOT BE SET
obj.setAttribute("id", "option");
obj.setAttribute("value", "1");

document.frm.appendChild(obj);
//THIS IS HOW YOU SET THE STYLE
//first create a font
var cont=document.createElement("font");
//now set the colour
cont.style.color="red";
//now set the text
var txt = document.createTextNode("Option 1");
//now add the text
cont.appendChild(txt);
document.frm.appendChild(cont);

var obj2 = document.createElement("input");
if(document.all){obj2=document.createElement("<input name='option'>");}
obj2.setAttribute("type", "radio");
obj2.setAttribute("name", "option");
obj2.setAttribute("id", "option");
obj2.setAttribute("value", "2");
//obj2.setAttribute("style", "position:relative; left:150px;");
document.frm.appendChild(obj2);
obj2 = document.createTextNode("Option 2");
//obj.setAttribute("style", "color:red;")
document.frm.appendChild(obj2);

//THIS IS HOW YOU SET IT CHECKED BY DEFAULT
//YOU MUST PUT THIS AT THE END
//obj.checked=true;
//OR...
obj.setAttribute("checked",true);
}
</script>
</head>
<body>
<a href="javascript:add();">Add</a><br>
<form name="frm"></form>
</body>
</html>
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10854018
Internet explorer does weird things when you try to name form elements, so you have to specify it in the createElement:

document.createElement("<input name='option'>")
0
 

Author Comment

by:DeLaVegaz
ID: 10854054
Ohh, and with other types of inputs like text or checkbox, do I have to do this too? Thanks you!
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10854127
I think it only applies to radio buttons, because with other elements, you don't need to worry about them not being in the same group. :) Setting the id will take care of the name for other elements.
0
 

Author Comment

by:DeLaVegaz
ID: 10854775
Great, now it works perfectly.... last question and I don't disturb anymore with this ;)
The if with the document.all, is it related with Internet Explorer 4? Why should it be used?
Thank you so much :)
0
 
LVL 12

Accepted Solution

by:
lil_puffball earned 200 total points
ID: 10854795
document.all works with all Internet explorer browsers. So basically I'm just detecting if the browseris IE or not. :)
0
 

Author Comment

by:DeLaVegaz
ID: 10854801
to detect Internet Explorer?
0
 

Author Comment

by:DeLaVegaz
ID: 10854813
Thank you!!!!
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10854825
Glad to help. :) Thanks for the points and the A.
0
 

Author Comment

by:DeLaVegaz
ID: 10854885
You're welcome... I was reading other posts and I've found you are just 15 years old??? Well, Congratulations! :))
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 10855336
So you said
obj.setAttribute("checked",true);
does not work, but it did
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10855351
Yes, I'm 15. :P

mplungian,
It does not work unless you put the code at the very end. :)
0
 

Author Comment

by:DeLaVegaz
ID: 10856603
obj.setAttribute("checked",true);
It was not working for me because I was testing the code in IE without knowing all of this..... Then when I tested in Mozilla, Firefox and Netscape, It worked...
Thanks... ;)
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses how to implement server side field validation and display customized error messages to the client.
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

670 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