Adding and deleting elements from a Textbox Array

Discussion in 'Javascript' started by Newcomsas, Dec 1, 2005.

  1. Newcomsas

    Newcomsas Guest

    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
     
    Newcomsas, Dec 1, 2005
    #1
    1. Advertising

  2. Newcomsas

    RobG Guest

    Newcomsas wrote:
    > 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>





    --
    Rob
     
    RobG, Dec 1, 2005
    #2
    1. Advertising

  3. Newcomsas

    RobG Guest

    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>



    --
    Rob
     
    RobG, Dec 1, 2005
    #3
  4. Newcomsas wrote:

    > 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]'
    + '<\/a>');

    > <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
     
    Thomas 'PointedEars' Lahn, Dec 1, 2005
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. S. Justin Gengo
    Replies:
    0
    Views:
    577
    S. Justin Gengo
    Jul 16, 2003
  2. Harry Barker
    Replies:
    2
    Views:
    543
    Alf P. Steinbach
    Apr 19, 2006
  3. dkmd_nielsen
    Replies:
    5
    Views:
    170
    dkmd_nielsen
    Mar 8, 2007
  4. Jonas Schneider

    Deleting values of array elements

    Jonas Schneider, Feb 11, 2008, in forum: Ruby
    Replies:
    5
    Views:
    144
    Jonas Schneider
    Feb 12, 2008
  5. crea
    Replies:
    2
    Views:
    440
    Nobody
    Dec 28, 2012
Loading...

Share This Page