PDA

Click to See Complete Forum and Search --> : Using getElementById but many times

theuberpuppy
09-16-2003, 12:56 PM
Hey people - hehe - I'm going to turn into a daily feature here soon :D

Anyway, I've got a .js file with some code that works as below:



function insertStuff(){
var someVar = "some stuff to say";
document.getElementById('stuff').innerHtml = someVar;
}


and then in the html page i've got


<html>
<head>
<title>Blah bLah blAh blaH</title>
<script type="text/javascript" src="file.js"></script>

</head>

<body onLoad="insertStuff()">
<div id="stuff"></div>
<div id="stuff1"></div>
</body>


Now, If i only want one insertion of the 'stuff' then that's ok...but what if i want to stick that in the page multiple times... using the same id doesn't work (cos i guess it's supposed to be unique) and only the first one will show.

My thoughts were to use a for loop or something like that and use a standard ... like id="stuff1" then next one would be id="stuff2". And the in the for loop just iterate a variable i and have document.getElementById('stuff+i).
If i do that - how would i count the number of instances of an id that starts with 'stuff' - or is there a more efficient way of doing all this?

Cheers for any help
Jona
09-16-2003, 01:31 PM
The .js file


function insertStuff(id, txt){
document.getElementById(id).innerHTML = txt;
}


The HTML file


<body onLoad="insertStuff('stuff', '<b>Click here!!!</b>');">
<div id="stuff" onClick="insertStuff('stuff1', 'Something to say...');"></div>
<div id="stuff1"></div>
</body>


[J]ona
Fang
09-16-2003, 02:55 PM
If the ids are in divs:
<script type="text/javascript">
<!--
function insertStuff(idName, txt){
var re=new RegExp(idName);
var DivElms=document.getElementsByTagName('div');
for(var i=0; i<DivElms.length; i++) {
if(re.test(DivElms[i].id)) {
DivElms[i].innerHTML=txt+" in "+DivElms[i].id;
}
}
}
//-->
</script>
</head>
<body onLoad="insertStuff('stuff', '<b>Click here!!!</b>');">
<div id="stuff"></div>
<div id="stuff1"></div>
<div id="stuffit"></div>
</body>
theuberpuppy
09-16-2003, 04:31 PM
Cheers guys, although i've gotg a few questions about some of that...

like, Jona, surely that will still just put it in the first tag with that id - because after that the script just doesn't look for any more tags of that id... or does this bypass that somehow? (and what's the whole click thing?)

Fang: i think i understand most of your code...in fact i think its exactly what i wanted - had to scrub about a bit to find out the meaning of regexp (i'm new :) ) but it looks kosher.
One question about the end of the script section - why DivElms[i].innerHTML=txt+" in "+DivElms[i].id;
What's the purpose of that bit? But thanks for the code in general.
theuberpuppy
09-16-2003, 05:21 PM
YAY! it works!!!!! everybody cheer
*cheer*
*cheer*
*cheer*

p.s. i ended up using your method fang - works quite succintly too - however, i don't call a function with some arguments - cos one script should do a number of inserts, so i cut down and had and onLoad function that just ran through all the span tags (i'm using span now for easier formatting in certain bits) and then inserts the relevant bits when and where necessary.

however, as a results i had to put quotation marks around the idName string i wanted to search for. i.e. var re = new RegExp("idName"); rather than var re = new RegExp(idName);
For some reason it wouldn't work without the quotes. Why is that btw?

Cheers for the help anyway guys

Al
Jona
09-16-2003, 07:08 PM
Originally posted by theuberpuppy
like, Jona, surely that will still just put it in the first tag with that id - because after that the script just doesn't look for any more tags of that id... or does this bypass that somehow? (and what's the whole click thing?)

The idea in my code is that you call the same function in the .js file every time you want to update the text of any object that has an ID (and can be filled with text or HTML, meaning a block-level element only).

[J]ona
Fang
09-17-2003, 12:52 AM
With quotes it's a string, without it's a variable.