If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

Problem with setting onclick function using createElement

I'm not very good at Javascript, but I can usually get done what I need to get done. Today, however, I've beat my head against the wall for hours and need some help.

I've got two simple functions. One adds a dynamic textbox and button to an existing form, the other removes the box/button. Any number of box/button combinations can be added.

The add code works fine. The remove code works fine IF I STATICALLY ADD THE BOX/BUTTON AND REFERENCE THE REMOVE CODE. However, if I dynamically add the box/button, the button never calls the remove code. I've tried a bunch of different ways, but it just sits there. Here's the code:

Users who have thanked rdspoons for this post:

Okay, I've cut out all non-essential code and this is what I have left. Yes, I know tables are the scourge of the earth and should be avoided at all costs. That said, they are still here. I don't think they are the issue though. My problem remains that I can't get the function to 'attach' to the button dynamically. It just does nothing. No errors....no nothing.

RDSpoons: Thanks for the coding suggestions. You are, of course, right, and those changes are very reasonable. However, I implemented them and am having the same problem. My issue is not so much passing the variable as it is getting the function to actually fire. It's like it is just not attached. I click the buttons and nothing happens -- no errors, nothing. The debugger just sits there too.....like I didn't click anything. It's really weird.

Users who have thanked xelawho for this post:

Your original code was very close to working - there only problem was that you were assigning the new elements names and then trying to delete them using IDs...

I appreciate the thought, but that can't be it. If you will check the latest code that I put up (not the original), you will see that I am indeed using ID's now as well. The problem isn't in the delete routine -- that routine works fine. The problem is that I can't get it to actually call the delete routine. It just ignores it altogether.

Well, I'll be. It does work (almost). Sorry about that. I actually had to include the reference to 'this' that was mentioned above, as without that it always referenced a single button, but otherwise it works great now.

You need to watch out for overwriting your dynamic srcripts when you use .innerHTML.

The DOM can be used to add the break, instead of using innerHTML, and it will avoid overwrite issues:
In place of...document.getElementById("lstValues").innerHTML = document.getElementById("lstValues").innerHTML + "<br>";
You can use...document.getElementById("lstValues").appendChild(document.createElement("br"));

Users who have thanked rdspoons for this post:

You need to watch out for overwriting your dynamic srcripts when you use .innerHTML.

The DOM can be used to add the break, instead of using innerHTML, and it will avoid overwrite issues:
In place of...document.getElementById("lstValues").innerHTML = document.getElementById("lstValues").innerHTML + "<br>";
You can use...document.getElementById("lstValues").appendChild(document.createElement("br"));

lol -- well that would have certainly been easier than the workaround I put in place. Will have to change my code to use what you just gave. I've been out of the loop for many years, so some of my programming methods/styles are severely antiquated. I can make it do what I want, but it ain't pretty. Thanks for the help.