Changing the style (opacity) of multiple images using javascript

Question

I am trying to get multiple elements, that are organised under 3 arrays "tops", "bottoms", "shoes".

I know I can grab multiple objects using the

document.getElementsByClassName("class1 class2");

How do I change the style for each of those objects, my current code is: (I have tried both visibility and opacity, but it keep getting a uncaught type error because the document.getelements.... isn't returning anything.

function filter() {
var this_id = event.target.id;
console.log(this_id);
if (this_id = "filtertops") {
    document.getElementsByClassName("a4 a7 a11 a12 a8").style.visibility="hidden"; //not tops
    document.getElementsByClassName("a1 a2 a3 a5 a9 a10 a14").style.visbility="visible"; // tops
    }
else if (this_id = "filterbottoms") {
    document.getElementsByClassName("a2 a3 a5 a10 a14 a8").style.opacity="0.4"; //not bottoms
    document.getElementsByClassName("a1 a4 a7 a9 a11 a12").style.opacity="1"; //bottoms
    }
else if (this_id = "filtershoes") {
    document.getElementsByClassName("a1 a2 a3 a4 a5 a7 a9 a10 a11 a12 14").style.opacity="0.4"; //not shoes
    document.getElementsByClassName("a8").style.opacity="1"; //shoes
    }

I tried assigning them to a variable as well and then a for loop to change the style of each object, but that didnt work either.

function filterbottoms() {
    var nonbottom = document.getElementsByClassName("a2 a3 a5 a10 a14 a8");
    var bottoms = document.getElementsByClassName("a1 a4 a7 a9 a11 a12");
    for (i in bottoms)
        {
            i.style.visibility='visible';
        }
    for (i in nonbottom)
        {
            i.style.visibility='hidden';
        } 

}

CSS class names mustn't start with a number, see: http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-names — feeela, Oct 24 '12 at 10:00

nnnnnn · Accepted Answer · 2012-10-24T10:09:11.350

4

You were close with the for loop:

for (i in bottoms){
    bottoms[i].style.visibility='visible';
}

should <edit>but won't</edit> work. On each iteration i is the next key, not the next value.

But you should use a conventional for rather than a for..in:

for (var i = 0; i < bottoms.length; i++){
    bottoms[i].style.visibility='visible';
}

EDIT: I recommended a conventional for loop because using for..in is generally not appropriate for arrays or array-like objects as (depending on the particular object) it will iterate over non-numeric properties. Joseph's comment confirms that in this case a for..in will definitely not work for that reason.

edited Oct 24 '12 at 10:09

answered Oct 24 '12 at 09:58

nnnnnn

147,572
30
200
241

actually the first will not work because of the for...in syntax. When looping through nodeList objects, they have a length attribute that then complains about not having a style attribute. The second one you provided should work. – Joseph Marikle Oct 24 '12 at 10:00
Thanks Joseph - answer updated a little. (Obviously I recommended a conventional for loop on the principle that that sort of thing _might_ happen, but I had not bothered to check if it would definitely be a problem for NodeLists.) – nnnnnn Oct 24 '12 at 10:10
The `document.getElementsByClassName("class1 class2");` is returned `[]`. Do you know why this is? – Unistudent Oct 24 '12 at 10:46
Presumably because your document doesn't have any elements that have both of those classes, so no elements are returned. – nnnnnn Oct 24 '12 at 10:55
doesn't it return all the elements that are in class1 or class 2 or class3 etc etc? because I have checked the images and they do have the relevant classes – Unistudent Oct 24 '12 at 11:00
I believe it returns only the elements that have _all_ of the specified classes, i.e., it is an AND, not an OR. That's what [MDN says](https://developer.mozilla.org/en-US/docs/DOM/document.getElementsByClassName)... – nnnnnn Oct 24 '12 at 11:24
oh, can you recommend another method? – Unistudent Oct 24 '12 at 11:26

Changing the style (opacity) of multiple images using javascript

1 Answers1