Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    document.getElementById() shortcut :)

    Using OOP, you can shorten your time spent typing "document.getElementById()" to something short as shown here:

    I use "Tie" as mine, since it's easy for me to remember hehe.

    Code:
    Tie = function () {} // This just declares the object "Tie".
    
    Tie.id = function (div) {
      return document.getElementById(div);
    }
    Now if you need to get something by using ID, You only have to type:
    Code:
    Tie.id("whatyouwant").innerHTML = "Useful";
    I find this saves me a lot of time.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    A more common and shorter way
    Code:
    function $(id) {
        return document.getElementById(id);
    }
    
    $("posts").style.backgroundColor = "black";

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    True, whichever you prefer really.

  • #4
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    947
    Thanks
    0
    Thanked 130 Times in 129 Posts
    Code:
    Doc=document;
    Object.prototype.Id=function(id){return this.getElementById(id);}
    Object.prototype.BGC=function(C){this.style.backgroundColor=C;}
    Code:
    Doc.Id('ElementID').BGC('black');

  • #5
    Regular Coder Taro's Avatar
    Join Date
    Oct 2011
    Location
    Geraldton, Ontario
    Posts
    155
    Thanks
    1
    Thanked 1 Time in 1 Post
    Hello,

    How do you incorporate this script with an on-button-click event?
    Element ID

    Webs Support Helper

    Your friendly neighborhood Taroman.

  • #6
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    947
    Thanks
    0
    Thanked 130 Times in 129 Posts
    Quote Originally Posted by Taro View Post
    How do you incorporate this script with an on-button-click event?
    Code:
    <html>
    <head>
    <title></title>
    <script>
    Doc=document;
    Object.prototype.Id=function(id){return this.getElementById(id);}
    Object.prototype.BGC=function(C){this.style.backgroundColor=C;}
    </script>
    <head>
    <body>
    <div id="Square"style="position:relative;top:0px;left:0px;height:100px;width:100px;"></div>
    <input type="button" onclick="Doc.Id('Square').BGC('black')" value="Make It Black">
    <input type="button" onclick="Doc.Id('Square').BGC('blue')" value="Make It Blue">
    </body>
    </html>

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,720
    Thanks
    80
    Thanked 4,514 Times in 4,478 Posts
    But couldn't you do it neater, thus?
    Code:
    <html>
    <head>
    <title></title>
    <head>
    <body>
    <div id="Square"style="position:relative;top:0px;left:0px;height:100px;width:100px;"></div>
    <form id="theForm">
    <input type="button" name="b1" value="Make It Black">
    <input type="button" name="b2" id-"b2" value="Make It Blue">
    </form>
    <script>
    Doc=document;
    Object.prototype.Id=function(id){return this.getElementById(id);}
    Object.prototype.BGC=function(C){this.style.backgroundColor=C;}
    
    // then either of these:
    Doc.Id("theForm").b1.onclick = function(){Doc.Id('Square').BGC('black');};
    Doc.Id("b2").onclick = function(){Doc.Id('Square').BGC('blue');};
    </script>
    
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    947
    Thanks
    0
    Thanked 130 Times in 129 Posts
    Also a good way.

    This way have the advantage(?) that all scripting is written inside the <script>

  • #9
    New Coder
    Join Date
    Jun 2012
    Posts
    80
    Thanks
    0
    Thanked 18 Times in 18 Posts
    Quote Originally Posted by Lerura View Post
    Code:
    Doc=document;
    Object.prototype.Id=function(id){return this.getElementById(id);}
    Object.prototype.BGC=function(C){this.style.backgroundColor=C;}
    Code:
    Doc.Id('ElementID').BGC('black');
    Be caution when you touch the Object class, it can effect to every object in javascript like you can't use For In to Array for get every index.

    If you want to do it that way I suggest you to use HTMLElement will be better choice then Object.

  • #10
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,112
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Quote Originally Posted by Old Pedant View Post
    But couldn't you do it neater, thus?
    Code:
    <html>
    <head>
    <title></title>
    <head>
    <body>
    <div id="Square"style="position:relative;top:0px;left:0px;height:100px;width:100px;"></div>
    <form id="theForm">
    <input type="button" name="b1" value="Make It Black">
    <input type="button" name="b2" id-"b2" value="Make It Blue">
    </form>
    <script>
    Doc=document;
    Object.prototype.Id=function(id){return this.getElementById(id);}
    Object.prototype.BGC=function(C){this.style.backgroundColor=C;}
    
    // then either of these:
    Doc.Id("theForm").b1.onclick = function(){Doc.Id('Square').BGC('black');};
    Doc.Id("b2").onclick = function(){Doc.Id('Square').BGC('blue');};
    </script>
    
    </body>
    </html>
    Minor typing error. Should be:
    Code:
    <input type="button" name="b2" id="b2" value="Make It Blue">

  • #11
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,173
    Thanks
    203
    Thanked 2,549 Times in 2,527 Posts
    This code throws an error in IE9

    Line: 17
    Error: Object doesn't support property or method 'Id'

    Seems a long way round to get to

    Code:
    <div id="Square"style="position:relative;top:0px;left:0px;height:100px;width:100px;"></div>
    
    <input type="button" id="b1" value="Make It Black" onclick = "change('black')">
    <input type="button" id="b2" value="Make It Blue" onclick = "change('blue')">
    
    <script type="text/javascript">
    function change(col) {
    document.getElementById("Square").style.backgroundColor = col;
    }
    </script>
    Last edited by Philip M; 06-14-2012 at 04:26 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #12
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,249
    Thanks
    15
    Thanked 254 Times in 254 Posts
    This is my version. Saves a lot of coding.
    Code:
    function byId(A)
    {
    var B=window.document.getElementById(A);
    return B;
    }
    function byClass(C)
    {
    var D=window.document.getElementsByClassName(C);
    return D;
    }
    function byTag(E)
    {
    var F=window.document.getElementsByTagName(E);
    return F;
    }


  •  

    Tags for this Thread

    Posting Permissions

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