473,326 Members | 2,173 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

Add remove elements dynamically

Hey, I am having problems adding/removing elements dynamically.
I know why it's not working, I just don't know a work-around for the problem.

Problem:
I am dynamically creating elements, naming them, and then later searching for them so I can eather append them, or delete them. Works in firefox of course. I know this isn't supposed to work, and I have no idea how to make it work.
Basically when I do this:

Expand|Select|Wrap|Line Numbers
  1. var fElement = getElementsByName('elementname');
and then do this
Expand|Select|Wrap|Line Numbers
  1. window.alert(fElement.length);
I obviously get a 0.

I just need some kind of work-around that follows standards, or at least compatible with Firefox, Internet Explorer, Safari, and Opera. If it doesn't work in Netscape it's no big deal.

thanks.

ALSO-----

Oh also, using a
Expand|Select|Wrap|Line Numbers
  1. document.createElement('<input name="whatever">');
Doesn't work eather. Still doesn't register.
Thanks.
Dec 20 '07 #1
6 3915
Dasty
101 Expert 100+
Expand|Select|Wrap|Line Numbers
  1. var fElement = document.getElementsByName('elementname');
  2. alert(fElement.length);
  3.  
Expand|Select|Wrap|Line Numbers
  1. var newobj = document.createElement('input');
  2. newobj.name = 'myname';
  3. document.body.appendChild(newobj);
  4.  
as an examples ...
Dec 20 '07 #2
Expand|Select|Wrap|Line Numbers
  1. var fElement = document.getElementsByName('elementname');
  2. alert(fElement.length);
  3.  
Expand|Select|Wrap|Line Numbers
  1. var newobj = document.createElement('input');
  2. newobj.name = 'myname';
  3. document.body.appendChild(newobj);
  4.  
as an examples ...
still returning Undefined when I specify a specific element in the fElement array, and the length is still 0. I'd post my code but it's a bit lengthy and uncommented. So here is what I did...I used your code and created a sample page...works in Opera, Firefox, but not Internet Explorer...
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <head>
  3.         <script type="text/javascript">
  4.             function addButton(){
  5.                 var newobj = document.createElement('button');
  6.                 newobj.name = 'myname';
  7.                 newobj.setAttribute('value', 'Button To Find');
  8.                 document.body.appendChild(newobj);
  9.             }
  10.             function findButton(){
  11.                 var fElement = document.getElementsByName('myname');
  12.                 var tElement = document.getElementsByName('tbox');
  13.                 window.alert(fElement.length);
  14.                 tElement[0].value = fElement.length;
  15.                 document.write(fElement.length);
  16.             }
  17.         </script>
  18.     </head>
  19.     <body>
  20.         <input type='button' onClick='addButton()' name='tbox' value='addbutton'></input>
  21.         <input type='button' onClick='findButton()' name='fbutton' value='Find Button'></input><br><br>
  22.     </body>
  23. </html>
I also tried creating the obect with this statement instead
Expand|Select|Wrap|Line Numbers
  1. var newobj = document.createElement('<input type="button" name="myname">');
and it still didn't work.
Dec 20 '07 #3
CORRECTION...

in IE when you use this instead
Expand|Select|Wrap|Line Numbers
  1. var newobj = document.createElement('<input type="button" name="myname">');
it works...but when I try to do this with a unordered list it doesn't work.
Dec 20 '07 #4
Through testing I discovered the solution to my problem that works on Opera, Firefox AND Internet Explorer.

Here it is.

Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <head>
  3.         <script type="text/javascript">
  4.             function addButton(){
  5.                 var newobj = document.createElement('div');
  6.                 newobj.id = 'myid';
  7.                 newobj.setAttribute('style', 'background-color: blue;');
  8.                 document.body.appendChild(newobj);
  9.                 var tElement = document.getElementsByName('tbox');
  10.                 newobj.appendChild(tElement[0]);
  11.             }
  12.             function findButton(){
  13.                 var fElement = document.getElementById('myid');
  14.                 var tElement = document.getElementsByName('tbox');
  15.                 window.alert(fElement.id);
  16.                 tElement[0].value = fElement.length;
  17.             }
  18.         </script>
  19.     </head>
  20.     <body>
  21.         <input type='button' onClick='addButton()' name='tbox' value='addbutton'></input>
  22.         <input type='button' onClick='findButton()' name='fbutton' value='Find Button'></input><br><br>
  23.     </body>
  24. </html>
Things to note...I searched for the ID as opposed to a name. This was my initial problem it seems. This does pose a problem for arrays of elements. I hope this helps out someone else. Couldn't find this information anywhere, no site specified that you can't use the name value on all elements. Anyhow, yeah.
Dec 20 '07 #5
acoder
16,027 Expert Mod 8TB
Couldn't find this information anywhere, no site specified that you can't use the name value on all elements. Anyhow, yeah.
This was discussed a few months ago here, but I can't find the link.

IE has a buggy implementation of the createElement method - see link (from the horse's mouth).

If you Google for "set name attribute IE", you may find one or two interesting links.
Dec 22 '07 #6
Here's a good link:

Creating Form Elements with javascript:
http://www.matts411.com/webdev/creating_form_elements_with_javascript
Jan 17 '08 #7

Sign in to post your reply or Sign up for a free account.

Similar topics

1
by: Will | last post by:
Hi, I have a problem trying to validate dynamically created html form elements using javascript. I have dynamically created a check box using ASP for each record in a recordset and have given each...
6
by: Arne Claus | last post by:
Hi If've just read, that remove() on a list does not actually remove the elements, but places them at the end of the list (according to TC++STL by Josuttis). It also says, that remove returns a...
3
by: Allen Chen [MSFT] | last post by:
Hi Richard, Quote from Richard================================================== However I also want to be able to remove the panes. I have tried to include this, but find that when I first...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.