13

Possible Duplicate:
How to get elements with multiple classes

Working on a bit of javascript code that sets the current URL of the referring page to pass into an iframe widget. No control over the code of the page on which the javascript resides, except for the one bit of javascript code.

An example of the element value I need to grab is as follows:

<div id="new_p_2FRolls-Royce_p_2F2013-Rolls-Royce-Phantom_p_2BDrophead_p_2BCoupe-4a5be12c0a0a00650143b598a45df25d_p_2Ehtm" class="page NEW_VEHICLE_DETAILS current">

What I'm trying to do is select the div by combining classes "page" and "current". In this example, "NEW_VEHICLE_DETAILS" is unique to this page, and varies on other pages. I would like to create a consistent bit of code that doesn't have to be altered for each page as it is currently. Here is the code I am using right now:

<div id="build_iframe"></div>
<script>
var pageid = document.getElementsByClassName('NEW_VEHICLE_DETAILS')[0].id;
var currenturl = 'http://m.whateverwebsite.com/index.htm#'+pageid;
var shareurl = escape(currenturl);
document.getElementById('build_iframe').innerHTML = '<iframe style="border:1px;width:100%;height:110px;" src="http://widget.mywidgetwebsite.com/share-tool/?current_url='+shareurl+'"></iframe>';
</script>

jQuery is not an option in this case. How can I get the value of the ID by selecting only the element with BOTH "page" and "current" classes set?

Uwe Keim
  • 39,551
  • 56
  • 175
  • 291
FurryWombat
  • 816
  • 2
  • 12
  • 28
  • 1
    I read that one. Didn't solve this issue. – FurryWombat Dec 02 '12 at 19:52
  • And several elements have the class "current"? (this sounds unusual) – Christophe Dec 02 '12 at 19:55
  • Strangely enough, there is only one element on the page with that class, but it doesn't work when I use "current". Only when I use "NEW_VEHICLE_DETAILS". It's looking like I just have to bite the bullet on this one, thanks to the sloppy code I have to work with. – FurryWombat Dec 02 '12 at 20:10

1 Answers1

27

You could use querySelector (or querySelectorAll if there's more than one matching element and you want to get a reference to all of them):

var elem = document.querySelector(".page.current");

You can also actually just use getElementsByClassName, which accepts a space-separated list of class names:

var elems = document.getElementsByClassName("page current");
James Allardice
  • 164,175
  • 21
  • 332
  • 312
  • `querySelector(All)` is available in IE8, which `getElementsByClassName` is not. So if the OP is comfortable with using `getElementsByClassName`, then this will sufficient and easier than any other solution. *edit:* woah, didn't know that you can pass multiple classes :-o – Felix Kling Dec 02 '12 at 19:25
  • Neither of these are working. Need to get not only elements that have one or the other classes, but only the one element which has both classes. – FurryWombat Dec 02 '12 at 19:45
  • Note that IE compatibility will not be an issue. This is designed for a mobile web app which will be used only on Android/iOS devices. – FurryWombat Dec 02 '12 at 19:46
  • Code I'm using is var pageid = document.getElementsByClassName("page current")[0].id; – FurryWombat Dec 02 '12 at 19:50
  • 1
    @FurryWombat - That should work. See [this working example](http://jsfiddle.net/jamesallardice/jTR8U/). – James Allardice Dec 02 '12 at 19:53
  • It works in a perfect environment. The one I'm working with is something closer to a swamp / garbage dump. Your answer is correct, but unfortunately still does not solve my problem. No fault of yours, of course. Thank you for your help. – FurryWombat Dec 02 '12 at 20:12