PDA

View Full Version : multiple ids in getElementById?



gusblake
10-11-2005, 08:28 AM
Can you have more than one id inside document.getElementById(), like document.getElementById(id1,id2) etc?

mwinter
10-11-2005, 12:11 PM
Can you have more than one id inside document.getElementById(), like document.getElementById(id1,id2) etc?No. The method only returns one element reference. This is indicated, in part[1], because of the singular usage of 'element'.

Mike


[1] The other, more telling indication is that function specification only lists one argument. :rolleyes:

jscheuer1
10-11-2005, 03:42 PM
With a little additional code you can grab more than one element, using getElementById(). But, what that additional code is depends upon what elements you want to grab and what you want to do with them. Here is one method:


els=['id1','id2','id3']
for (var i_tem = 0; i_tem < els.length; i_tem++)
document.getElementById(els[i_tem]).style.visibility='visible'

neomaximus2k
06-14-2006, 01:22 PM
Hey guys, I am trying to dynamiccaly edit a text box depending upon what other fields have been entered.

Sadly I cant post the entire code or a link due to it being an admin script but this is the JS code


function generateproddeschtml(){
<!-- ok generate the product description and place it into the description field -->
var NUMBEROF = document.getElementById('numberofrows').value;
THEFIELDS = Array();
for (var i = 0; i < NUMBEROF; i++){
THEFIELDS[i] = 'rowtitle_'+i;
alert(i);
}
var HTML = '<table width="460" cellpadding="0" cellspacing="0">';
for (var i_temp = 0; i_temp < THEFIELDS.length; i_teno++){
HTML = HTML + '<tr><td width="17"><img src="http://www.discsexpress.com/img/doughnut_red.gif" width="15" height="15" /></td><td height="21" width="200">'+document.getElementById(THEFIELDS[i_temp]).value+'</td><td width="250">'+document.getElementById('rowdesc_'+i)+'</td></tr>';
}
HTML = HTML + '</table>'
document.getElementById("description").value = HTML;
}


and the error I get is
Error: document.getElementById(THEFIELDS[i_temp]) has no properties
Line: 84

any ideas?:confused:

jscheuer1
06-14-2006, 03:16 PM
There is so much messed up about that code that I cannot be certain of its actual intent. This could be what you want but, it depends upon the HTML of the page it is used on, so I have no idea if that fits. Also, unless the various fields exist and are filled out as expected, there will be problems even if everything else is set up correctly:


function generateproddeschtml(){
//ok generate the product description and place it into the description field
var NUMBEROF = document.getElementById('numberofrows').value*1;
var HTML = '<table width="460" cellpadding="0" cellspacing="0">';
for (var i_temp = 0; i_temp < NUMBEROF; i_temp++){
HTML = HTML + '<tr><td width="17"><img src="http://www.discsexpress.com/img/doughnut_red.gif" width="15" height="15" /></td><td height="21" width="200">'+document.getElementById("rowtitle_"+i_temp).value+'</td><td width="250">'+document.getElementById("rowdesc_"+i).value+'</td></tr>';
}
HTML = HTML + '</table>'
document.getElementById("description").innerHTML = HTML;
}

If document.getElementById("description") is a text field or text area, that last line should remain as it was:


document.getElementById("description").value = HTML;

neomaximus2k
06-14-2006, 03:31 PM
There is so much messed up about that code that I cannot be certain of its actual intent. This could be what you want but, it depends upon the HTML of the page it is used on, so I have no idea if that fits. Also, unless the various fields exist and are filled out as expected, there will be problems even if everything else is set up correctly:


function generateproddeschtml(){
//ok generate the product description and place it into the description field
var NUMBEROF = document.getElementById('numberofrows').value*1;
var HTML = '<table width="460" cellpadding="0" cellspacing="0">';
for (var i_temp = 0; i_temp < NUMBEROF; i_temp++){
HTML = HTML + '<tr><td width="17"><img src="http://www.discsexpress.com/img/doughnut_red.gif" width="15" height="15" /></td><td height="21" width="200">'+document.getElementById("rowtitle_"+i_temp).value+'</td><td width="250">'+document.getElementById("rowdesc_"+i).value+'</td></tr>';
}
HTML = HTML + '</table>'
document.getElementById("description").innerHTML = HTML;
}

If document.getElementById("description") is a text field or text area, that last line should remain as it was:


document.getElementById("description").value = HTML;

Hi there John,
That looks a lot like my first code I added the array in due to the problem to see if that would cure it, i'll try the code in a few mins and see what happens

Still getting the exact same error

jscheuer1
06-14-2006, 03:44 PM
Then, most likely, the number entered in the:

document.getElementById('numberofrows')

field does not agree with the number of:

document.getElementById("rowtitle_"+i_temp)

fields and/or the number of:

document.getElementById("rowdesc_"+i)

fileds.

Also, it would be impossible to get the same exact error, as the new code no longer references:

document.getElementById(THEFIELDS[i_temp])

There could be other problems because, as I mentioned before, without seeing the HTML of the page in question, I cannot know if this code fits with it or visa versa. You should create a demo page that contains all the elements relevant to this portion of code that you are trying to run and either post a link to it or include it as an attachment.

neomaximus2k
06-14-2006, 03:47 PM
Then, most likely, the number entered in the:

document.getElementById('numberofrows')

field does not agree with the number of:

document.getElementById("rowtitle_"+i_temp)

fields and/or the number of:

document.getElementById("rowdesc_"+i)

fileds.

Also, it would be impossible to get the same exact error, as the new code no longer references:

document.getElementById(THEFIELDS[i_temp])

There could be other problems because, as I mentioned before, without seeing the HTML of the page in question, I cannot know if this code fits with it or visa versa. You should create a demo page that contains all the elements relevant to this portion of code that you are trying to run and either post a link to it or include it as an attachment.


I just got a bad felling.... the rows start from 1 not 0 and the for loop starts at 0 which could be causing the error.... bah not enough time to many things ahhh thanks for the help john will have to squeeze it in

shachi
06-15-2006, 06:52 AM
Hey gusblake did you try the prototype $() function?? Well if you haven't then here's the link:

http://www.dustindiaz.com/top-ten-javascript/

Scroll down to the last function.

mwinter
06-15-2006, 09:52 AM
Hey gusblake did you try the prototype $() function??Why should anyone want to use anything from a library as badly-written as Prototype? Moreover, why are you addressing a post six months old?

People unfamiliar with scripting would do well to avoid it. The rest would do better to write their own code.

Mike

nnoza
03-05-2008, 12:06 AM
Ive got a problem right here! The problem is that I need to have multiple ID(elements) inside document.getElementById('') but this code wont work. I found it on a similar website that uses exactly the same code as Ive got here. The strange thing is that the code works on this site but wont work at all on my!!???!? I am not so used to js so please help me anyone if possible.

As it is now the js code steers only the "nav1". So my question is how can I have multiple ID:s inside document.getElementById('')..? Is it possible at all?

Here is the link to the working site: http://mjijackson.com/shadowbox/ (Image Map)..

<script type="text/javascript">

window.onload = function(){

Shadowbox.init();

/**
* Note: The following command is not necessary in your own project. It is
* only used here to set up the demonstrations on this page.
*/
initDemos();

};

function initDemos(){

Shadowbox.setup([

document.getElementById('nav3'),
document.getElementById('nav4'),
document.getElementById('nav4')

], {
gallery: 'Flash',
continuous: true,
counterType: 'skip',
animSequence: 'sync'
});
Shadowbox.setup(document.getElementById('hongkongmap').getElementsByTagName('area'));
};

</script>

<img src="text3.png" width="730" height="238" alt="projects 1 & 2" usemap="#nav3">
<map id="nav3" name="nav3">
<area shape="rect" coords="30,11,241,143" href="blekingemenu.png" alt="Blekingemenu.com">
<area shape="rect" coords="260,11,471,143" href="admalish.png" alt="Admalish">
</map>

<img src="text4.png" width="730" height="238" alt="projects 3 & 4" usemap="#nav4">
<map id="nav4" name="nav4">
<area shape="rect" coords="30,11,241,143" href="wii_confess.png" alt="">
<area shape="rect" coords="260,11,471,143" href="admalish.png" alt="">
</map>

<img src="text5.png" width="730" height="238" alt="projects 5 & 6" usemap="#nav5">
<map id="nav5" name="nav5">
<area shape="rect" coords="30,11,241,143" href="blekingemenu.png" alt="">
<area shape="rect" coords="260,11,471,143" href="admalish.png" alt="">
</map>

jscheuer1
03-05-2008, 06:37 AM
Ive got a problem right here!

For something like this, even though it appears to be on topic for this thread, since it is such an old (2006) thread, please start your own thread and lay out the specifics of your case as clearly and succinctly as possible. Use:



Your code here


around code sections, so that they look like so:


Your code here

But, the general answer to grabbing more than one element by its id and processing them all with the same code is to set up a function for the processing, an array to hold the ids, and a loop to run them all through the function:


function forMany(id){
var m=document.getElementById(id);
m.whatever='something';
m.something_else='another_thing';
}

forMany.ids=['cat', 'dog', 'bob'];

for(var i=0;i<forMany.ids.length;++i)
forMany(forMany.ids[i]);