SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy getElementById(someVariable)

    Hello,

    I have got a problem with getElementById function, because it seems to me, that it doesn't work correctly when there is a variable as an argument. For example:

    Code:
    var i = 3; document.getElementById(i);
    This is code which doesn't work correctly:

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Page Title</title>
    <script type="text/javascript">
    var i = 3;
    function addInput()
    {
        var a = document.createElement('input');
        a.type = 'text';
        a.name = 'option_' + i;
    	a.id = i;
        var inputs = document.getElementById('inputs');
        inputs.appendChild(document.createElement('br'));
        inputs.appendChild(a);
        i++;
    }
    
    function removeInput()
    { 
         var b = document.getElementById(i);
    	 document.write(b);
    }
    </script>
    </head>
    <body>
    <span id="inputs">
    	<input type="text" name="option_1" id="1" />
    	<br />
    	<input type="text" name="option_2" id="2" />
    </span>
    <br />
    <button onclick="addInput();">Add text box</button>
    <button onclick="removeInput();">Remove text box</button>
    </body>
    </html>
    When I press Remove text box, it shows a value of variable b, which is null. I don't know why. Could you help me with this problem?

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,799
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    An id has to start with a letter. It can't start with a number.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I have changed it to:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Page Title</title>
    <script type="text/javascript">
    var i = 2;
    
    function addInput()
    {
        var a = document.createElement('input');
        a.type = 'text';
        a.name = 'option_' + i;
    	a.id = 'option_' + i;
        var inputs = document.getElementById('inputs');
        inputs.appendChild(document.createElement('br'));
        inputs.appendChild(a);
        i++;
    }
    
    function removeInput()
    {    
         var j = 'option_' + i;
    	 //document.write(j);
    	 //document.write(typeof(j));
         var elem = document.getElementById(j);
    	 document.write(elem);
    	 i--;
    }
    </script>
    </head>
    <body>
    <span id="inputs">
    	<input type="text" name="option_1" id="option1" />
    	<br />
    	<input type="text" name="option_2" id="option2" />
    </span>
    <br />
    <button onclick="addInput();">Add text box</button>
    <button onclick="removeInput();">Remove text box</button>
    </body>
    </html>
    But it still says, that it is NULL...
    Last edited by jake.polak; Jul 2, 2008 at 01:10.

  4. #4
    SitePoint Addict ArunB's Avatar
    Join Date
    Jun 2008
    Location
    Hyderabad
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, what is your requirement?

    Code JavaScript:
    var inputs = document.getElementById('inputs');

    Use:

    Code JavaScript:
    var inputs = document.getElementByTagName('inputs');



    I didn't get the requirement. If you tell your requirement, it will be easier to solve the problem.
    Last edited by ArunB; Jul 4, 2008 at 04:31. Reason: Added some text.

  5. #5
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @ArunB - There is no such thing as the "inputs" element, I think you mean the "input" element. Also it's "getElementsByTagName" (with an "s").
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  6. #6
    SitePoint Addict ArunB's Avatar
    Join Date
    Jun 2008
    Location
    Hyderabad
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, it's a typo

  7. #7
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Jake, what does it say if you alert() the "J" variable?
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  8. #8
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jake.polak View Post
    Code:
    var i = 2;
    
    function addInput()
    {
        var a = document.createElement('input');
        a.type = 'text';
        a.name = 'option_' + i;
    	a.id = 'option_' + i;
        var inputs = document.getElementById('inputs');
        inputs.appendChild(document.createElement('br'));
        inputs.appendChild(a);
        i++;
    }
    
    function removeInput()
    {    
         var j = 'option_' + i;
    	 //document.write(j);
    	 //document.write(typeof(j));
         var elem = document.getElementById(j);
    	 document.write(elem);
    	 i--;
    }
    </script>But it still says, that it is NULL...
    The final value of i doesn't apply to the last element created. Think about it.
    Tab-indentation is a crime against humanity.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •