/    Sign up×
Community /Pin to ProfileBookmark

Using getElementById but many times

Hey people – hehe – I’m going to turn into a daily feature here soon ?

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

[code]

function insertStuff(){
var someVar = “some stuff to say”;
document.getElementById(‘stuff’).innerHtml = someVar;
}
[/code]

and then in the html page i’ve got

[code]

<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>
[/code]

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

to post a comment
JavaScript

6 Comments(s)

Copy linkTweet thisAlerts:
@JonaSep 16.2003 — [font=arial][i]The .js file[/i][/font]

[font=monospace]

function insertStuff(id, txt){

document.getElementById(id).innerHTML = txt;

}

[/font]

[font=arial][i]The HTML file[/i][/font]

[font=monospace]

<body onLoad="insertStuff('stuff', '<b>Click here!!!</b>');">

<div id="stuff" onClick="insertStuff('stuff1', 'Something to say...');"></div>

<div id="stuff1"></div>

</body>

[/font]

[b][J]ona[/b]
Copy linkTweet thisAlerts:
@FangSep 16.2003 — If the ids are in divs:
[code=php]<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>
[/code]
Copy linkTweet thisAlerts:
@theuberpuppyauthorSep 16.2003 — 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 [i]think[/i] 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.
Copy linkTweet thisAlerts:
@theuberpuppyauthorSep 16.2003 — 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
Copy linkTweet thisAlerts:
@JonaSep 17.2003 — [i]Originally posted by theuberpuppy [/i]

[B]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?) [/B][/QUOTE]


[font=arial][color=maroon]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).[/color][/font]

[b][J]ona[/b]
Copy linkTweet thisAlerts:
@FangSep 17.2003 — With quotes it's a string, without it's a variable.
×

Success!

Help @theuberpuppy spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...