Solved

Problem with DOM: Radio, checked and style

Posted on 2004-04-17
21
1,274 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 50 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Preface This article introduces an authentication and authorization system for a website.  It is understood by the author and the project contributors that there is no such thing as a "one size fits all" system.  That being said, there is a certa…
Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

756 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