How to change the background image of a button using JavaScript?

Question

I want to change the background image of a button using Javascript. Here is what I am currently trying, but it is failing.

HTML code -

      <tr id="Rank1">
              <td><button class="darkSquare"></button></td>
               <td><button class="lightSquare" ></button></td>
                <td><button class="darkSquare" ></button></td>
               <td><button class="lightSquare" ></button></td>
                <td><button id="e1" class="darkSquare" ></button></td>
                <td><button class="lightSquare" ></button></td>
                <td><button class="darkSquare" ></button></td>
                <td><button class="lightSquare"> </button></td>
            </tr>

JavaScript Code

        initializer();

        function initializer()
         {
           var tableRow = document.getElementById("Rank1");

           var buttons = tableRow.getElementsByTagName("button");

           for(b in buttons)
            {
               console.log(b.toString());
               b.style.backgroundImage = "url('darkSquare.jpg')";
            }
         }

In the console, I get an error saying b.style is undefined.

ckozl · Accepted Answer · 2012-02-23 15:51:50Z

4

for (... in ...) loops do not work that way in JavaScript it should be:

for (var b = 0; b < buttons.length; b++) {
    buttons[b].style.backgroundImage = "url('darkSquare.jpg')";
}

for (... in ...) actually iterates over all the "members" of an object

eg. using var x = {a: 1, b: 2, c: 3} in for(var m in x) console.log(m) will produce

> a
> b
> c

it kind of works with arrays because it considers the indices members like this:

var x = [1,2,3];
for (var m in x) console.log(m);
> 0
> 1
> 2

since it is giving you the indices as if they were members you can't distinguish. the pitfall is:

var x = [1,2,3];
x.stuff = 'boo!';
for (var m in x) console.log(m);
> 0
> 1
> 2
> stuff

General Rule of Thumb: only use for (... in ...) when iterating over members in an object, use for (var i = 0; i < array.length; i++) when using arrays

you can always cheat and use:

for (var i = 0, item = x[i]; i < x.length; item=x[++i]) {
    // now item is the current item
}

edited Feb 23, 2012 at 15:51

answered Feb 23, 2012 at 15:27

ckozl

6,7613 gold badges35 silver badges51 bronze badges

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

4 Comments

CodeBlue Over a year ago

Yes. This worked, but why didn't the for in loop work? What was I doing wrong there?

CodeBlue Over a year ago

Oh. So in arrays the indices are considered as members. Hmmm. Very helpful.

ckozl Over a year ago

for (var b in buttons) buttons[b].style... but this doesn't say what you think it does read my edited comment above^ but what it breaks down to is for (... in ...) isn't an iterator like it is in other languages (java, c#, etc...)

ckozl Over a year ago

because I added .stuff as an expando member to the object that is of the type Array in the line x.stuff = 'boo!';, remember ALL JavaScript objects support expando properties.

Francis · Accepted Answer · 2012-02-23 15:27:54Z

1

You should change your loop as so

for(var i = 0; i < buttons.length; i++)
{
   buttons[i].style.backgroundImage = "url('darkSquare.jpg')";
}

The loop you used assign keys in a variable b. Since you didn't use the hasOwnProperty function, this loop can also yield other data you might not want.

You could also use the for-in loop as so

for(var b in buttons)
{
    if (buttons.hasOwnProperty(b))
        buttons[b].style.backgroundImage = "url('darkSquare.jpg')";
}

answered Feb 23, 2012 at 15:27

Francis

3,40324 silver badges47 bronze badges

Comments

Teneff · Accepted Answer · 2012-02-23 15:34:09Z

1

when using for ( ... in .... ) the first parameter is the key in the array so you have to use it like this:

for( b in buttons ) {
    buttons[b].style.backgroundImage = "url('darkSquare.jpg')";
}

working example in jsFiddle

answered Feb 23, 2012 at 15:34

Teneff

32.3k13 gold badges76 silver badges107 bronze badges

Collectives™ on Stack Overflow

How to change the background image of a button using JavaScript?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related