Js Methods On Js Made Elements

[shadowayex]

I tried using the getElementsByTagName method on elements that I had JavaScript write. They, obviously, do not work. I'm sure the reason is that they're not technically in the source code, so JavaScript doesn't see their existence. That's my problem. is there any way to make JavaScript see their existence?

[chibineku]

It should work...try giving the elements a unique id and referencing them by their ids. You can have JS dole out a uniqueid automatically, in case there are too many being created to manage them by hand. So, if you're creating them in a loop, in that loop give them a uniqueid and add that to an array of ids, which you can work through later. If you're only making one or two, then it's easier.

[shadowayex]

It should work...try giving the elements a unique id and referencing them by their ids. You can have JS dole out a uniqueid automatically, in case there are too many being created to manage them by hand. So, if you're creating them in a loop, in that loop give them a uniqueid and add that to an array of ids, which you can work through later. If you're only making one or two, then it's easier.

I know getElementById works, so I could go the extra distance of giving everything ids and doing it that way. I didn't think about that .But weird thing, I just found that getElementsByTagName works fine, on many small scale tests. I'm going to work with it and see if I can find a different possible problem. I will be back with the results of some testing and probably with a new question .Edit: I got a description of the error using a debugger, but I don't understand the problem. I'm going to post some code and an explanation of what's supposed to happen and what the error is.Each block of code looks like so:

			<span id="1">				<input type="checkbox" id="1" value="" />				Song Name: <input type="text" value="" /><br />			</span>

With the ids, of course, going up by one each time a new one is added. This function is used to add one or more (depending on the user's designer) spans exactly like the above one:

			function add(multiple)			{				var nextid = document.getElementById("songs").getElementsByTagName("span").length;				var amt = 1;				if(multiple == true)				{					amt = prompt("How many would you like to add?", "");				}								for(i = 1; i <= amt; i++)				{					nextid += 1;					document.getElementById("songs").innerHTML += "<span id=\"" + nextid + "\">";					document.getElementById("songs").innerHTML += "<input type=\"checkbox\" id=\"" + nextid + "\" /> ";					document.getElementById("songs").innerHTML += "Song Name: <input type=\"text\" value=\"\" /><br /></span>";				}			}

That code works for sure. I've tested it and it makes each span just fine, gives it the proper id and everything. THen I have this experimental function. What the code is supposed to do is simply recognize which spans have a checked box and then alert the data in the text box. Of course, the final appplication is going to do more with the data. I'm just having it do that for now.

			function test()			{				var elem = document.getElementById("songs").getElementsByTagName("span");								for(i = 0; i <= (elem.length-1); i++)				{					if(elem[i].getElementsByTagName("input")[0].checked == 1) //The error is in this line, apparently					{						alert(elem[i].getElementsByTagName("input")[1].value);					}				}			}

The error the debugger gives is elem.getElementsByTagName("input")[0] is undefined.Logically, that should fine the first input inside of the span tag, should it not? Or am I rusty of my JS logic?

[shadowayex]

I just discovered something else. If the first span (which is actually in the markup) is selected, it works. It's only with the one JS created that the problem occurs. Apparently it doesn't want to admit that inputs exist inside of spans it created =/Edit: A couple other discoveries. One, when the JS writes by markup, it does not include the space and / in my inputs. I don't know why it takes them out, but it does. So they are technically not valid XHTML. And 2, I made it just print the innerHTML of the spans, and it printed the first one out fine. But when it got to the ones made by JS, it printed out nothing. This is interesting, because I can see the stuff it made quite clearly on the screen.

[justsomeguy]

First, about the IDs. IDs are not supposed to start with a number, and you shouldn't have more than one element with the same ID, they are supposed to be unique.If you're using Firebug, use console.log to write out the different elements you're checking. You might not be checking the span you think you are.

[shadowayex]

Good call on the ids. I didn't think about it. And I figured out what's going on. In my add function, the code looks like:

document.getElementById("songs").innerHTML += "<span id=\"" + nextid + "\">";document.getElementById("songs").innerHTML += "<input type=\"checkbox\" id=\"" + nextid + "\" /> ";document.getElementById("songs").innerHTML += "Song Name: <input type=\"text\" value=\"\" /><br /></span>";

It's actually writing:<span id="2"></span><input id="2" type="checkbox"> Song Name: <input value="" type="text"><br>When it should be writing:<span id="2"><input type="checkbox" id="2" /> Song Name: <input type="text" value="" /><br /></span>I discovered this by printing the entire innerHTML of the <div> it's all inside. The JS is writing it all funky. Is there a cause for this?Edit: I took the ids out temporarily as they are irrelevant at this point. Nothing changed.

[Ingolme]

Good call on the ids. I didn't think about it. And I figured out what's going on. In my add function, the code looks like:

document.getElementById("songs").innerHTML += "<span id=\"" + nextid + "\">";document.getElementById("songs").innerHTML += "<input type=\"checkbox\" id=\"" + nextid + "\" /> ";document.getElementById("songs").innerHTML += "Song Name: <input type=\"text\" value=\"\" /><br /></span>";

It's actually writing:<span id="2"></span><input id="2" type="checkbox"> Song Name: <input value="" type="text"><br>When it should be writing:<span id="2"><input type="checkbox" id="2" /> Song Name: <input type="text" value="" /><br /></span>I discovered this by printing the entire innerHTML of the <div> it's all inside. The JS is writing it all funky. Is there a cause for this?Edit: I took the ids out temporarily as they are irrelevant at this point. Nothing changed.

It's automatically closing the <span> tag for you. When you update the innerHTML property of an element, the parser reconfigures the DOM tree.Try putting everything in a string before adding it to the innerHTML:

var str = "<span id=\"" + nextid + "\">";str += "<input type=\"checkbox\" id=\"" + nextid + "\" /> ";str += "Song Name: <input type=\"text\" value=\"\" /><br /></span>";document.getElementById("songs").innerHTML = str

[shadowayex]

That did it! =DI had no idea it automatically did stuff like that. I suppose if I have put it all on one line that would've never happened. But doing it your way keeps it organized.It now works just fine, well, for the time being. I'll break something soon enough.Thanks so much for the help. I learned something new =D