Как изменить фоновое изображение кнопки с помощью JavaScript? - PullRequest
Новая
       35

Как изменить фоновое изображение кнопки с помощью JavaScript?

1 голос
/ 23 февраля 2012

Я хочу изменить фоновое изображение кнопки, используя Javascript.Вот что я сейчас пытаюсь, но не получается.

HTML-код - 

      <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 

        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')";
            }
         }

В консоли появляется сообщение об ошибке: b.style не определен

Ответы [ 3 ]

3 голосов
/ 23 февраля 2012

for (... in ...) циклы не работают таким образом, в JavaScript это должно быть: 

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

for (... in ...) фактически перебирает все "члены" объекта

например. использование var x = {a: 1, b: 2, c: 3} в for(var m in x) console.log(m) даст 

> a
> b
> c

он работает с массивами, потому что считает элементы индексов такими: 

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

так как он дает вам индексы, как если бы они были членами, которых вы не можете различить. ловушка это: 

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

Общее правило : используйте for (... in ...) только при переборе членов в объекте, for (var i = 0; i < array.length; i++) при использовании массивов

вы всегда можете обмануть и использовать : 

for (var i = 0, item = x[i]; i < x.length; item=x[++i]) {
    // now item is the current item
}
1 голос
/ 23 февраля 2012

при использовании for ( ... in .... ) первый параметр является ключом в массиве, поэтому вы должны использовать его следующим образом: 

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

рабочий пример в jsFiddle

1 голос
/ 23 февраля 2012

Вы должны изменить свой цикл так, как 

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

Цикл, который вы использовали, назначает ключи в переменной b. Поскольку вы не использовали функцию hasOwnProperty, этот цикл также может выдавать другие данные, которые вам могут не понадобиться.

Вы также можете использовать цикл for-in, так что 

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