Problem with DOM: Radio, checked and style

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>
DeLaVegazAsked:
Who is Participating?
 
lil_puffballConnect With a Mentor Commented:
document.all works with all Internet explorer browsers. So basically I'm just detecting if the browseris IE or not. :)
0
 
Michel PlungjanIT ExpertCommented:
option is not a great name and does
obj.setAttribute("checked", true);

not work?
0
 
lil_puffballCommented:
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
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
DeLaVegazAuthor Commented:
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
 
lil_puffballCommented:
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
 
DeLaVegazAuthor Commented:
And what about the position (style)? How can I do it?
0
 
lil_puffballCommented:
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
 
DeLaVegazAuthor Commented:
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
 
azcn2503Commented:
It's as if the name attribute doesn't work.
0
 
lil_puffballCommented:
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
 
lil_puffballCommented:
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
 
DeLaVegazAuthor Commented:
Ohh, and with other types of inputs like text or checkbox, do I have to do this too? Thanks you!
0
 
lil_puffballCommented:
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
 
DeLaVegazAuthor Commented:
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
 
DeLaVegazAuthor Commented:
to detect Internet Explorer?
0
 
DeLaVegazAuthor Commented:
Thank you!!!!
0
 
lil_puffballCommented:
Glad to help. :) Thanks for the points and the A.
0
 
DeLaVegazAuthor Commented:
You're welcome... I was reading other posts and I've found you are just 15 years old??? Well, Congratulations! :))
0
 
Michel PlungjanIT ExpertCommented:
So you said
obj.setAttribute("checked",true);
does not work, but it did
0
 
lil_puffballCommented:
Yes, I'm 15. :P

mplungian,
It does not work unless you put the code at the very end. :)
0
 
DeLaVegazAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.