JavaScript Can you debug this?

[smallwall]

Hi,
hier habe ich ein Problem für JavaScript Nerds, und ich meine NERDS.

http://devphp.de/board/board2.php

Das Problem: Die untere linke Ecke ist der "Move Indicator", und verändert seine Farbe, je nach dem, welche Seite am Zug ist.
Das Funktioniert so lange, bis man das Brett umdreht mit dem Link "flip".
Ich verstehe nicht, wieso er dann nicht mehr funktioniert, das HTML bleibt ja gleich, die Ecke hat die id="moveIndicator", die Funktion sieht so aus

        if (cfg.showMoveIndicator) {
            if (game.turn() === 'b') {
                moveIndicatorEl.css('background-color', '#000');
            } else {
                moveIndicatorEl.css('background-color', '#fff');
            }
        }

Sie verändert die Hintergrundfarbe zu schwarz oder weiß, aber wie schon beschrieben, nicht mehr nach einem board.flip().

Hat da jemand eine Erklärung für?

mfg

P.S.: Das ist übrigens kein Bild, sondern ein voll funktionsfähiges Schachbrett, man kann die Figuren benutzten, aber nur legale Züge eigeben.

 

[Kavakuo]

Moin moin,

es müsste funktionieren, wenn du

moveIndicatorEl.css('background-color', '#000');

mit

document.getElementById("moveIndicator").style.backgroundColor = "#000";

ersetzt. Hier funktioniert das so jedenfalls. Die andere Zeile für weiß natürlich auch dementsprechend ändern.

 

[rg88]

...

 

[smallwall]

Unglaublich. Das funzt. Kann jemand erklären, warum das klappt, und die andere Version nicht? Bzw. nur am Anfang und nicht mehr nach dem flip?

 

[marcOcram]

Das liegt daran, dass du in `moveIndicatorEl` ein Objekt speicherst. Dieses Objekt geht beim Wechsel verloren, da das Board neu gezeichnet wird.
Das andere funktioniert, weil es beim Aufrufen nach dem Element sucht und es in dem Moment findet. Bei einem Wechsel sucht es erneut nach dem Element.

 

[r15ch13]

Geht auch mit jQuery wenn man das Element neu sucht.

if (cfg.showMoveIndicator) {
    if (game.turn() === 'b') {
        $("#moveIndicator").css('background-color', '#000');
    } else {
        $("#moveIndicator").css('background-color', '#fff');
    }
}

 

[smallwall]

Naja, die Idee des moveIndicatorEl ist ja, dass ich es einmal anlege, und dann damit .style.backgroundColor festlege, egal wie die id dann heißt. Naja egal, es funktioniert ja jetzt.

Die Zusatzaufgabe ist jetzt, in der if Abfrage die Variable CSS.moveIndicator aus chessboard-0.3.0.js:229 anzusprechen. Die CSS.moveIndicator wird als id geschrieben, wenn ich die id dort anders benenne, müsste ich in der if Abfrage die id auch anpassen. Wenn ich die Variable ansprechen könnte, könnte ich dort einfacher das Element wählen. Weiß jemand wie man das macht?

 

[r15ch13]

Ah du hast die chessboard.js angepasst. Ich wuerde den moveIndicator als CSS Klasse festlegen. Da du sonst nur noch ein Board auf einer Seite anzeigen kannst.

chessboard.js:633

html += '<div class="coordz" id="'+CSS.moveIndicator+'">&nbsp;</div>';

zu:

html += '<div class="coordz '+CSS.moveIndicator+'">&nbsp;</div>';

Den Namen musst du dann auch nicht aendern koennen da du die Id der deines Wrapper Elements kennst.
Also

$("#board").find(".moveIndicator")

 

[smallwall]

Eine Klasse statt einer ID, das ist natürlich auch sinnvoll. Jetzt brauche ich nur noch etwas wie

$('#board').find(CSS.moveIndicator).css(...);

 

[r15ch13]

Ne umdrehen:

$(boardWrapperId).find(".moveIndicator").css(...);

Die ID des Wrapper Elements kennst du.
#board1, #board2, #board3 etc.

 

[smallwall]

Umdrehen? Ich möchte ja nicht ".moveIndicator" dort stehen haben, sondern halt den Inhalt der Variable.

 

[r15ch13]

Du kommst doch auch anderes herum dran. Sonnst muesstest du fuer jedes Board den moveIndicator neu benennen obwohl es unnoetig ist.

PS: Entweder

var boardID = '#board';
$(boardID).find(".moveIndicator").css('background-color', '#000');

oder

var boardID = $('#board');
boardID.find(".moveIndicator").css('background-color', '#000');

 

[smallwall]

Naja, wenn ich

<div class="coordz ' + CSS.moveIndicator + '">&nbsp;</div>

schreibe, wäre es auch gut wenn es mit CSS.moveIndicator .find-en könnte.

 

[mambokurt]

Das liegt daran, dass du in `moveIndicatorEl` ein Objekt speicherst. Dieses Objekt geht beim Wechsel verloren, da das Board neu gezeichnet wird.
Das andere funktioniert, weil es beim Aufrufen nach dem Element sucht und es in dem Moment findet. Bei einem Wechsel sucht es erneut nach dem Element.

An der Stelle sollte man vielleicht mal auf Hilfe zur Selbsthilfe verweisen: wenn du sowas noch mal hast dann machst du einfach mal ein

console.log(moveIndicatorEl)

und schaust dir an, was das ausspuckt (Entwicklerkonsole). Da kriegst du dann entweder null zurück wenn es nicht gesetzt ist oder optional eben das falsche Element was er beim Wickel hat, dann kannst du da recht einfach sehen was er nun genau in moveIndicatorEl referenziert.

 

[smallwall]

Ja, console.log brauche ich oft zum debuggen. In diesem Fall bin ich einfach nicht darauf gekommen, dass beim .flip() der moveIndicatorEl verloren geht. Seis drum, wenn ich jetzt noch die Variable ansprechen könnte, wäre ich (für dieses Thema) wunschlos glücklich :-)