So ändern Sie den hintergrund einer Schaltfläche mit JavaScript?

Möchte ich den hintergrund ändern-Bild für einen button mit Javascript. Hier ist, was ich bin versucht derzeit, aber Sie ist fehlerhaft.

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 der Konsole, bekomme ich eine Fehlermeldung.b.Formatvorlage nicht definiert.

InformationsquelleAutor CodeBlue | 2012-02-23

3

for (... in ...) Schleifen nicht so wie in JavaScript, die es sein sollte
```
for (var b = 0; b < buttons.length; b++) {
    buttons[b].style.backgroundImage = "url('darkSquare.jpg')";
}
```
for (... in ...) tatsächlich iteriert über alle "Mitglieder" des Objekts

zB. mit var x = {a: 1, b: 2, c: 3} im for(var m in x) console.log(m) produzieren
```
> a
> b
> c
```
es Art von arbeiten mit arrays, da Sie der Auffassung ist, die Indizes, die Mitglieder wie diese:
```
var x = [1,2,3];
for (var m in x) console.log(m);
> 0
> 1
> 2
```
da es geben Ihnen die Indizes, als wären Sie Mitglieder, die Sie nicht erkennen kann. der Fallstrick ist:
```
var x = [1,2,3];
x.stuff = 'boo!';
for (var m in x) console.log(m);
> 0
> 1
> 2
> stuff
```
Faustregel: verwenden Sie nur for (... in ...) beim Durchlaufen der Mitglieder in einem Objekt verwenden for (var i = 0; i < array.length; i++) bei der Verwendung von arrays

Sie können immer betrügen und verwenden:
```
for (var i = 0, item = x[i]; i < x.length; item=x[++i]) {
    //now item is the current item
}
```
- Ja. Das hat funktioniert, aber warum nicht die für in-Schleife arbeiten? Was Tat ich falsch?
- Oh. Also in den arrays die Indizes sind als Mitglieder. Hmmm. Sehr hilfreich ist.
- for (var b in buttons) buttons[b].style... aber nicht sagen, was Sie denken, es liest meine bearbeiteten Kommentar oben^ aber was es bricht, ist for (... in ...) nicht einen iterator, wie es bei anderen Sprachen (java, c#, etc...)
- Die Letzte Zeile verwirrt mich. Warum bekommt man 0 1 2 und dann "Zeug"???
- da ich Hinzugefügt .stuff als eine expando-Mitglied auf das Objekt, das der Typ Array in der Zeile x.stuff = 'boo!';, denken Sie daran, ALLE JavaScript-Objekte unterstützen expando-Eigenschaften.
InformationsquelleAutor ckozl
1

Sollten Sie Ihren Kreislauf so
```
for(var i = 0; i < buttons.length; i++)
{
   buttons[i].style.backgroundImage = "url('darkSquare.jpg')";
}
```
Die Schleife, die Sie verwendet Tasten zuweisen in eine variable b ist. Da Sie nicht verwenden die hasOwnProperty-Funktion, können Sie diese Schleife ergeben sich auch andere Daten, die Sie vielleicht nicht wollen.

Konnte man auch mit der for-in-Schleife als so
```
for(var b in buttons)
{
    if (buttons.hasOwnProperty(b))
        buttons[b].style.backgroundImage = "url('darkSquare.jpg')";
}
```
InformationsquelleAutor Francis
1

bei der Verwendung for ( ... in .... ) der erste parameter ist der key im array, so dass Sie haben, um es so zu benutzen:
```
for( b in buttons ) {
    buttons[b].style.backgroundImage = "url('darkSquare.jpg')";
}
```
Beispiel arbeiten in jsFiddle

InformationsquelleAutor Teneff

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.