document.getElementById

This site is best viewed in a modern browser with JavaScript enabled.

locbtran

I have this and it works but it looks very messy, especially if I have over a dozen line of document.getElementById

Here's my code:

document.getElementById("a").innerHTML = "Letter a";
document.getElementById("a").innerHTML = "Letter b";
document.getElementById("a").innerHTML = "Letter c";

I can rewrite as

  

with (document.getElementById("a")){
   innerHTML = "Letter a";
   innerHTML = "Letter b";
   innerHTML = "Letter c";
}

what happen if I have this and the value that I pass in is very random.
How can I rewrite it so it will look cleaner?

document.getElementById("a1").innerHTML = "Letter a";
document.getElementById("a33").innerHTML = "Letter b";
document.getElementById("cx").innerHTML = "Letter c";
document.getElementById("dz").innerHTML = "Letter d";
document.getElementById("x99").innerHTML = "Letter e";
document.getElementById("fish").innerHTML = "Letter f";

Sup3rkirby

Typically with things like this you simply want to create a function that returns the element, so you end up with cleaner code. jQuery of course provides this kind of capability, but depending on your project you may not want to include the entire jQuery library only to use a small set of features/functions.

So the simplest version of what you want would look something like this:

function _($e) { return document.getElementById($e); }

_("a1").innerHTML = "Letter a";
_("a33").innerHTML = "Letter b";
_("cx").innerHTML = "Letter c";
_("dz").innerHTML = "Letter d";
_("x99").innerHTML = "Letter e";
_("fish").innerHTML = "Letter f";

But as I keep reading your post I wonder if you are actually asking for a way to reduce the number of lines, not just the size of the code. So instead of having 12+ lines of this same thing, you would like 3 or 4. But if this is the case I would need to know a little bit more about your code as there are several ways this can be achieved, however it will depend on how you have things set up in your code. For instance, you could use a for() loop to go through a list of elements, but this requires you to have those element ids and values you want in an array and I'm not sure if that's possible in your case or not. You could also use the .childNodes method to loop through all of the elements, but this only works if all of the elements are in the same container.

locbtran

what you have is excellent but I was just wondering...
calling a function for just one line, does that not slow the program down?

Sup3rkirby

Believe it or not but using the function actually seems to do (slightly) better in performance. (link)

I'm not really an expert on code performance so forgive me if anything I say is untrue. But based on what I do know, .getElementById() is already a function that exist in the browser's DOM so in essense you are already having to call a function every time you list out document.getElementById("foo"). My guess is this has to do with the javascript being parsed by the browser when the page loads. The browser doesn't run the literal version of the code we see, so it's possible that once all of the code has been parsed, the custom function merely uses up less resources allowing it to run slightly faster that the full DOM call.

bionoid

Depending on the actual purpose the code could be written in different ways. For example if you constantly made changes to the elements then having a function, as Sup3rkirby suggested, to quickly query for an element might be the best. However if it's simply for initializing a mass of element values, then you can do it like so:

(function(o) {var i; for (i in o) {if (o.hasOwnProperty(i)) {document.getElementById(i).innerHTML = o[i];}}}
({
	a1   : 'Letter a',
	a33  : 'Letter b',
	cx   : 'Letter c',
	dz   : 'Letter d',
	x99  : 'Letter e',
	fish : 'Letter f'
}));

Padonak

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>123</title>
<script>
function $(id){return document.getElementById(id);}
function _(id,content){$(id).innerHTML=content;}
onload=function(){
_('a1','Letter a');
/* in case that you have many similar id's */
var i=2;
while($('a'+i)!==null){_('a'+i,'some content '+i);i++}
_('a33','Letter b');
}
</script>
</head>
<body>
<div id="a1"></div>
<div id="a2"></div>
<div id="a3"></div>
<div id="a4"></div>
<div id="a5"></div>
<div id="a6"></div>
<div id="a7"></div>
<div id="a8"></div>
<div id="a9"></div>
<div id="a10"></div>
<div id="a33"></div>
</body>
</html>