How to change the CSS for all elements with a common identifier using Javascript?

Question

I'm relatively new to javascript, but I searched trough google and stackoverflow for the past several hours and I still can't get this to work, it looks like it's something that should be simple but I'm not sure what I'm overlooking....

I'm trying to make a checkbox to disable my website's onhover tooltips by moving them all away when the checkbox is ticked (since I couldn't apply visibility:hidden; on hover with js), but I can't seem to make the checkbox affect more than a single tooltip.

I'm using GetElementById() which seems to only make use of one element by that id, but I couldn't get GetElementsByClassName() nor GetElementsByName() to work for some reason, even though as far as I can tell from w3schools I should be able to just replace my GetElementById() with the latter two, why does this happen and what should I do instead?

Here's my code: http://jsfiddle.net/wwX3k/1/

    function optioninfovisibilitytoggle() {
    if (optioninfovisibility.checked) { document.getElementById('optioninfo').style.left='9001%'
    } else { document.getElementById('optioninfo').style.left='12%' }
} optioninfovisibilitytoggle();

I need all the tooltips to move aside, by inline id or class or name or whatever, as long as all of them move aside rather than just the top one

Thanks in advance for any help

There should never be more than one element with a given identifier. That's why it's called the "id" - it identifies an element uniquely. If you need to categorize multiple elements, use a class. — Pointy
– Pointy, Commented Aug 2, 2014 at 21:27
Also, when you use an API that returns multiple elements, you get back a list of elements. You can't change the style of all the elements in the list as if it were just one element - you have to iterate over the list and change each one individually. — Pointy
– Pointy, Commented Aug 2, 2014 at 21:29
@Pointy, I tried using a class, that's why all spans in my example have the same class name and why I said I couldn't get GetElementsByClassName() to work :( I just left it as id because that was the only thing that came close to working. How would I iterate and change everything in a list if that's the only option..? Either way, thanks for your help thus far — KittenCodings
– KittenCodings, Commented Aug 2, 2014 at 21:35

user888734 · Accepted Answer · 2014-08-02 21:39:35Z

2

document.getElementsByClassName is going to return an array of elements, so to apply your style, you'll have to iterate through the array and set each one:

http://jsfiddle.net/nGTN5/3/

When performing DOM manipulation like this, you'll save yourself a ton of bother by using jQuery - http://jquery.com/

Then it would be as simple as:

$('.optioninfo').css('left', '9001%')

And that will do them all.

answered Aug 2, 2014 at 21:39

user888734

3,9175 gold badges40 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

KittenCodings Over a year ago

Ah, that works wonders, thanks! :D On a somewhat unrelated note though, this might be an incredibly nooby question but what's stopping the i++ in your code from going into an infinite loop? I don't see any until function or equivalent, does it automatically know when to stop searching for more elements? Or is that what the i<elements.length part does?

Pointy Over a year ago

@KittenCodings yes, the middle expression in a for loop header is the test conducted before each iteration of the loop. When that test is false the loop stops.

KittenCodings Over a year ago

@Pointy ohh, such a short and simple loop method, nice, thanks :D

dube · Accepted Answer · 2014-08-02 21:38:16Z

1

You gave multiple elements the same IDs. This is not allowed, IDs are unique. Your browser works around your faulty HTML by giving the first element the id and ignoring the following ID definitions.

You can give them an specific class (which you already did) to identify all objects you want to perform your operation on.

I recommend using jQuery, which would reduce the work to a minimum:

$(".optioninfo").toggle();

or instead of getElementById(), you use getElementsByTagName(), which returns an array of matching elements. You probably need to check if those "span" tags are those you want by checking their css class.

function optioninfovisibilitytoggle() {
    var allelems =document.getElementsByTagName('span');
    if (optioninfovisibility.checked) {
        for(i=0; i< allelems.length;i++){
               if((' ' + allelems[i].className + ' ').indexOf(' optioninfo ') > -1) {
              allelems[i].style.left='9001%'
            }
        }
    } else { 
            for(i=0; i< allelems.length;i++){
                  if((' ' + allelems[i].className + ' ').indexOf(' optioninfo ') > -1) {
                      allelems[i].style.left='12%' 
                  }
            }
    }
}

answered Aug 2, 2014 at 21:38

dube

5,0692 gold badges26 silver badges47 bronze badges

2 Comments

Pointy Over a year ago

There's also getElementsByClassName() and querySelectorAll()

dube Over a year ago

@Pointy ha! trying to write stupid code without any JS framework makes me go mad :)

Pevara · Accepted Answer · 2014-08-02 22:09:15Z

1

Allow me to add a few words to the correct answers that have already been given:

If hiding the tooltips is al you are going to do, I would not advise you to use jQuery as already suggested. It is a very useful toolkit that is definitely worth exploring, but adding +90k to your page for such a trivial task would be serious overkill.
You are right when you say that js is not able to access the :hover css, but there are several mouse events that you can use to overwrite this styling. Have a look at mouseover for example.
I'm a big fan of only using js when things can't be done with pure css, and in this case I believe that is possible. It does require you to move the checkbox up the DOM so it comes before al your tooltips, but you could still position it anywhere on your page by making it absolute. If you then combine :checked with ~ you can hide your tooltips without a single line of javascript. Have a look at your updated fiddle to see what I mean.

answered Aug 2, 2014 at 22:09

Pevara

14.3k1 gold badge37 silver badges49 bronze badges

2 Comments

KittenCodings Over a year ago

On your first note, indeed, that is why I didn't want to use jQuery unless I'm forced to later :) currently my entire website of 20+ heavy-looking pages is still meerely 30kb or so, so jQuery would indeed be overkill. Secondly, that's some cool stuff, will come in handy futuremore for my website :D On your third note, I too find it fun what you can do with js including "hacking" a website's CSS, but I've been surprised today with how difficult some things can be... also, unfortunately I can't get your fiddle to work in chrome for some reason. Thanks for your nice reply and and tips though :)

Pevara Over a year ago

works fine for me in Chrome/mac. The links should be blue on hover when the checkbox isn't checked, and green if it is checked. I don't see why it wouldn't work, support should be fine caniuse.com/#feat=css-sel3

Collectives™ on Stack Overflow

How to change the CSS for all elements with a common identifier using Javascript?

3 Answers 3

3 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related