Portal Home > Knowledgebase > Articles Database > JavaScript: getElementById for more than first element?
JavaScript: getElementById for more than first element?
| Posted by orty, 06-12-2008, 03:51 PM |
| Here's a snipped of my code (some external function calls have been removed and this is just the relevant snippet of my code -- don't use this code as-is as it won't work):
Basically, what this code does is checks with an external (off site) server to see if there's a different phone number it should display on the site for marketing purposes (depending on what keywords got them to the site). I wanted to make it so that if that off-site server is down, it will just have a number in place and will only overwrite it if the code executes properly.
Code executes fine and runs fine, but it only changes the first to the new number. The site I'm working on is going to have several places on a certain page where the phone number couple possibly appear, and I'd love to just put "(800) 555-5555" wherever there could be a phone number so it would change that as well. There could be as many as 5 phone numbers appearing on a page.
Any ideas on how to accomplish this without changing the span id on a bunch of spans and have the javascript change all of them?
|
| Posted by LibraHost, 06-12-2008, 04:01 PM |
Hi,
An id attribute is ment to be unique within a single document (page), hence there can only be one element with an id='tollfreenumber'. You could wrap the whole toll-free number section up in a and assign that div an id and then get a collection of nodes within that using
getElementbyTagName('span')
Blah Blah Blah Blah
(800) 555-5555
(800) 555-5555
(800) 555-5555
also maybe it is just a typo but the fragment you posted is missing a start tag
HTH
April
|
| Posted by orty, 06-12-2008, 04:13 PM |
| Unfortunately, the toll-free numbers is going to be scattered around the page (that was just example code to see if I could get three elements to change) so wrapping the whole thing in a div probably wouldn't work (as there are s all over the page, too).
However, I guess I could probably use some obscure tag that isn't being used anywhere at all (like or something), format that tag with CSS and then do that (as I think the layout of the page I'm working on already has a div encompassing the entire page).
That's an ugly hack, however, and was hoping to find something a little more elegant. Any other ideas?
|
| Posted by LibraHost, 06-12-2008, 04:39 PM |
| Hi,
Well it may not be elegent but you could get all the span elements on the page, iterate through the node list and operate on those nodes that have a unique class designation:
one advantage to this aproach is you can style all tollfreenumber span elements the same way, if desired....
HTH
|
| Posted by sasha, 06-12-2008, 05:26 PM |
| Just to add that you can use multiple classes with tags, so class you use to identify element does not have to have actual CSS definition.
...
You can always try using some javascript framework that allows you easy access to these elements. $("span.tollfreenumber") in jQuery would have all those elements selected for you,
|
| Posted by Snargleflap, 06-12-2008, 05:36 PM |
| OP said the numbers could be all over the page. To do this, would the whole page have to be inside the 'tollfreenumber' div? Then you couldn't have any other spans within the div besides the ones you intend to update, right? What's the javascript syntax for updating the values contained in the spans?
Thanks
|
| Posted by orty, 06-12-2008, 05:53 PM |
| Exactly. My goal behind this is to that folks who also work on the site can drop that 800 ... anywhere they put toll-free on the site (no matter the formatting), and have it replace the 800# with a different one, if it needs to.
|
| Posted by Harzem, 06-12-2008, 06:02 PM |
| One thing is particular. ID attribute is designed to be unique. Using more than one element with the same id will give you an HTML validation error.
Try using name instead of id. I think there is something called getElementByName, and it *may be* able to modify multiple elements with the same name.
But with id's... It needs a real ugly hack. Not recommended.
|
| Posted by Snargleflap, 06-12-2008, 06:04 PM |
| To be honest, I've been programming for 22 years now, and I've come to take "the path of least resistence". It would be cool to figure out how to do it in the slickest way, but in reality you're only dealing with a small number of pre-defined fields on the page, so the quicker route would probably be to just give them all unique id's and stick with setting their values individually.
That's how I would proceed. But then, I've been coding so long that I just want to get the project done and spend as little time as possible trying to figure out the slickest way to do things
|
| Posted by orty, 06-12-2008, 06:08 PM |
| Fair enough. I'll look into getElementByName (and looking here that might work), and see if that will work. I'm just trying to ake this easy as it's also a project that will better a product that we're currently paying a good deal of money for -- and we're hoping we can use it as leverage to cut us a deal :-)
|
| Posted by Adam-AEC, 06-12-2008, 06:15 PM |
| You could change the id tag to a class tag and use jQuery to iterate over all the span tags that have 'tollfree' as their class.
Untested:
|
| Posted by Snargleflap, 06-12-2008, 06:17 PM |
| When you do find the solution, be sure to come back and post it so we can all use it in the future.
|
| Posted by LibraHost, 06-12-2008, 06:21 PM |
| Hi,
i don't always read things carefully enough....
in the first post to this thread I assumed that teh tol free numbers were in one place, my second post, hopefully gives a better approach since I missed the all over the page requirement.
On syntax, I always have to lookup functions/properties etc. to remember...and I don't have my handy javascript pocket guide with me today (the fun of working with different langaugaes!)
you can always use innerHTML, but I believe nodeValue would be the text property for the current node (during the iteration). I beileve the class property can be accessed directly (please someone corrct me if i'm wrong here)
var myNodeList = document.getElementsByTagName( 'span' );
for (var i=0; i < myNodeList.length; i++) {
//assume only 1 class assigned to span
if (myNodeList[i].class == 'tollfreenumber') {
myNodeList[i].nodeValue = '(800) 555 - 1212';
}
}
HTH
|
| Posted by Snargleflap, 06-12-2008, 06:28 PM |
| Javascript is one of those things I do because I have to. My latest project is packed to the rim with javascript code because it has to accomodate every stinking version of every browser on every platform on every planet in the galaxy! It's been ghastly, I'm forever googling javascript syntax.
|
| Posted by LibraHost, 06-12-2008, 06:41 PM |
| Its a great langauge but it sure is problematic! Your comment along with the fact that javascript won't work with PDAs, etc has lead me to go mostly 'server-side' programming. These days I have lots of fun with xml & xslt transforms to generate xhtml! still have to wrestle with css though....its great, powerful and totally quirky
|
| Posted by Snargleflap, 06-12-2008, 06:49 PM |
| It's all enough to make me miss the days when I sat at a dumb terminal cranking out COBOL code that displayed on a 80 column by 24 row green monochrome text-only monitor.
Ahhh, the good ol' days.
|
| Posted by orty, 06-12-2008, 07:27 PM |
| I'll be out of town the next few days, but when I attack this again, I'll be sure to share if/when I find a solution.
|
| Posted by Barti1987, 06-12-2008, 10:54 PM |
| getElementsByTagName should work fine, as pointed by LibraHost.
Peace,
|
| Posted by Saeven, 06-13-2008, 01:47 AM |
| Why not turn to a framework to get the job done? Selectors are very sensitive to tuning, ExtJS shines in this dept:
With Ext's base class loaded into your program, you could just do:
Note that used CSS class selection. Using same-name IDs across the board is a bit of a no-no. IDs should be unique, but classes can be used at will
Good luck!
Alex
|
| Posted by orty, 06-15-2008, 12:35 PM |
| If I only had one span in the entire document, it would, but there are other things enclosed in spans, not just phone numbers. :-)
Never have looked at ExtJS, but was hoping to avoid using too many external libraries if at all possible (as I already use a few external JS calls, was hoping to cut down on them).
-jake
|
| Posted by orty, 06-24-2008, 03:24 PM |
| Just an FYI to anybody who's looking to try this. I basically made my code like this to get this to work:
Now all spans get rewritten. There were probably 1000 ways to do this, but this works for me.
|
Add to Favourites 
Print this Article
Also Read
Banning Ips (Views: 765)
Shared Hosting
Shared Hosting
