Adding and deleting elements from a Textbox Array

[Newcomsas]

Hello,

I'm trying to solve a problem with JS textbox array without success.
I have two buttons in my page: PLUS and MINUS; at every click on PLUS a new
textbox named 'dear' is generated. So, if one clicks, say, 3 times the
output is something like:

dear[0]
dear[1]
dear[2]

The length property is accessible; alert(dear.length) gives '3', correctly.
The prolbem is that is not possible to delete a textbox, clicking on MINUS
button.
The thing I'd really need to do is to delete from the array (and in
consequence from video) the last textbox created, when one clicks on MINUS
button.
Pop() and Splice() methods do not work, unfortunely...
This is the exact code of my page:

<a href="#plus" onclick="john.innerHTML+='<li><input id=dear type=text
size=50>'">
[PLUS]
</a>
<br>
<a href="#minus" onclick="alert(dear.length);dear.pop()">
[MINUS]
</a>

<ul>
<div id=john>
</div>
</ul>


Is there anyone who can help me ? I thank you in advance.

Newcomsas

 

[RobG]

Hello,

I'm trying to solve a problem with JS textbox array without success.

You don't create and array, so it has nothing to do with arrays.

I have two buttons in my page: PLUS and MINUS; at every click on PLUS a new
textbox named 'dear' is generated. So, if one clicks, say, 3 times the
output is something like:

dear[0]
dear[1]
dear[2]

The 'output' is nothing like that.

The result of your script is that some HTML is injected into a DIV that
(according to the HTML) is a child of a UL element. That is invalid to
start with, a DIV can't be a child of a UL. The only element that a UL
can contain is one or more LI elements, that's it.

The HTML for the LI elements gives them all the same ID, which is
further invalid HTML. They are inserted as children of a DIV which (you
guessed it) is also invalid HTML.

It's surprising that it works at all. Well, maybe not since browsers
are awfully tolerant of HTML 'tag soup'.

The length property is accessible; alert(dear.length) gives '3', correctly.

IE adds references to elements with NAMEs and IDs to the global space.
If you have multiple elements with the same NAME or ID, then a reference
to one name will return an object that has references to all the
elements with that ID or NAME. But the object is not an array (I don't
know what it is, but it doesn't have any of the methods of an array, it
seems to be more like an HTML collection).

The prolbem is that is not possible to delete a textbox, clicking on MINUS
button.

If the MINUS button had suitable code, it would.

The thing I'd really need to do is to delete from the array (and in

Forget the array, there isn't one.

consequence from video) the last textbox created, when one clicks on MINUS
button.
Pop() and Splice() methods do not work, unfortunely...

JavaScript is case sensitive, the array object has pop and splice
methods. But there is no array...

This is the exact code of my page:

<a href="#plus" onclick="john.innerHTML+='<li><input id=dear type=text
size=50>'">

When posting code, manually wrap it at about 70 characters to prevent
news readers auto-wrapping it and introducing more errors.

Rather than 'fix' your code, I'll start from scratch. Below is an
example of how to go about it, it's just to get you going. The empty UL
element is invalid HTML, fix that if validation matters (and usually it
does), but since the idea of text inputs in LI elements is kinda weird,
I'm thinking that this will change anyway:


<input type="button" value="Add an LI"
onclick="addLI('john');">
<input type="button" value="Delete an LI"
onclick="deleteLI('john');">

<ul id="john">
</ul>

<script type="text/javascript">

function addLI(id)
{
var ul = getElement(id);
if (!ul) return;

if (!document.createElement) return;

var li = document.createElement('li');
var inp = document.createElement('input');
inp.size = '50';
li.appendChild(inp);
ul.appendChild(li);
}

function deleteLI(id)
{
var ul = getElement(id);
if (!ul) return;

if (!ul.getElementsByTagName) return;
var lis = ul.getElementsByTagName('li');
if (lis.length){
ul.removeChild(lis[lis.length-1]);
}
}

function getElement(id){
if (getElementById) {
return getElementById(id);
} else if (document.all){
return document.all[id];
}
return null;
}
</script>

 

[RobG]

RobG wrote:
[...]

Agggrrhhh... some corrections:

The result of your script is that some HTML is injected into a DIV that
(according to the HTML) is a child of a UL element. That is invalid to
start with, a DIV can't be a child of a UL. The only element that a UL
can contain is one or more LI elements, that's it.

That should say: a UL element can only have LI elements as children.
The LIs can have other elements as children, so the UL could 'contain'
other elements.


[...]

function getElement(id){
if (getElementById) {

That should be:

if (document.getElementById) {

return getElementById(id);

And that should be:

return document.getElementById(id);

} else if (document.all){
return document.all[id];
}
return null;
}
</script>

 

[Thomas 'PointedEars' Lahn]

I'm trying to solve a problem with JS textbox array without success.
I have two buttons in my page: PLUS and MINUS; at every click on PLUS a
new textbox named 'dear' is generated. So, if one clicks, say, 3 times the
output is something like:

dear[0]
dear[1]
dear[2]

The length property is accessible; alert(dear.length) gives '3',
correctly.

There is nothing correct about that. First of all, that named/IDed elements
and element collections are reflected by properties of the Global Object is
only an oddity of the IE DOM.

Second, there MUST NOT be two elements with the same ID. Use `name' if you
have to.

The prolbem is that is not possible to delete a textbox,
clicking on MINUS button.
The thing I'd really need to do is to delete from the array (and in
consequence from video) the last textbox created, when one clicks on MINUS
button.
Pop() and Splice() methods do not work, unfortunely...

Whatever they are, as they are not built-in.

This is the exact code of my page:

<a href="#plus" onclick="john.innerHTML+='<li><input id=dear type=text
size=50>'">
[PLUS]
</a>
<br>
<a href="#minus" onclick="alert(dear.length);dear.pop()">
[MINUS]
</a>

Not that neither will work without client-side script support, so
the respective elements should be generated by client-side script.
Furthermore, there should not be whitespace at the beginning and
end of the `a' element's content.

document.write(
'<a href="#plus"'
+ ' onclick="john.innerHTML+=\'<li><input id=dear type=text'
+ ' size=50>\'">'
+ '[PLUS]'
+ '<\/a>'
+ '<br>\n'
+ '<a href="#minus" onclick="alert(dear.length);dear.pop()">'
+ '[MINUS]'

<ul>
<div id=john>
</div>
</ul>

That is not Valid HTML. The `ul' element MUST NOT have a child `div'
element, it MUST have at least one child `li' element.

Is there anyone who can help me ? I thank you in advance.

Look into W3C DOM methods Document::createElement(), Node::appendChild()
and Node::removeNode().[1] Look into IE DOM methods insertAdjacentElement()
and removeChild() as alternative[2] if W3C DOM methods are determined to be
not properly supported on run-time feature test.[3] Make your underlying
markup Valid HTML in the first place.[4]

[1] <URL:http://www.w3.org/TR/DOM-Level-2-Core/>
[2]
<URL:http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp>
[3] <URL:http://www.pointedears.de/scripts/test/whatami>, § 2.
[4] <URL:http://validator.w3.org/>


PointedEars