...

View Full Version : document.getElementById() shortcut :)



Tazz-99
05-09-2012, 04:45 AM
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.



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:


Tie.id("whatyouwant").innerHTML = "Useful";


I find this saves me a lot of time. :)

devnull69
05-09-2012, 07:12 AM
A more common and shorter way


function $(id) {
return document.getElementById(id);
}

$("posts").style.backgroundColor = "black";

Tazz-99
05-09-2012, 10:15 PM
True, whichever you prefer really. :)

Lerura
05-10-2012, 05:12 AM
Doc=document;
Object.prototype.Id=function(id){return this.getElementById(id);}
Object.prototype.BGC=function(C){this.style.backgroundColor=C;}

Doc.Id('ElementID').BGC('black');

Taro
05-10-2012, 10:33 PM
Hello,

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

Lerura
05-16-2012, 12:56 AM
How do you incorporate this script with an on-button-click event?
<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>

Old Pedant
05-16-2012, 01:12 AM
But couldn't you do it neater, thus?


<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>

Lerura
05-16-2012, 01:38 AM
Also a good way.

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

Richter
06-12-2012, 12:08 PM
Doc=document;
Object.prototype.Id=function(id){return this.getElementById(id);}
Object.prototype.BGC=function(C){this.style.backgroundColor=C;}

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.

jmrker
06-12-2012, 09:43 PM
But couldn't you do it neater, thus?


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


<input type="button" name="b2" id="b2" value="Make It Blue">

:D

Philip M
06-14-2012, 07:47 AM
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


<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>

DrDOS
06-14-2012, 03:21 PM
This is my version. Saves a lot of coding.



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;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum