JavaScript greift auf bereits entfernte DOM-Elemente zu?

[borisbaer]

Hallo Rolf, ich komme leider erst jetzt zum Antworten, da ich beruflich sehr eingespannt war.

Die executed Variable ist eine andere Sache, deren Zweck verstehe ich noch nicht. Damit steuerst Du offenbar das Zuweisen der Klasse 'on', das beim ERSTEN Mal - also beim ersten newPage Aufruf für ein Kartenset - nicht passieren soll. Mir scheint, das ist genau den newPage Aufruf, der in changePage direkt passiert, die übrigen kommen aus den Eventlistenern.

Die Klasse on gibt den Karten lediglich eine Fade-In-Animation, die ich beim ersten Laden jedoch nicht haben möchte. Mehr macht dieser Teil des Codes nicht.

Die letzte Amtshandlung von newPage ist das Setzen der globalen Variablen pageNumber. Diese globale Variable muss weg, die pageNumber muss sich aus dem DOM ermitteln. Deswegen habe ich Dir aria-selected empfohlen. Die Eventhandler können, statt pageNumber zu nutzen, die Pages durchgehen und feststellen, welche davon aria-selected=true hat. Das geht mit querySelector:

let currentPage = document.querySelector(".maps .page[aria-selected=true]");

Ich habe mal versucht, über aria-selected die Navigation zu steuern.

Und dann verwendest Du nicht die pageNumber und rechnest plus/minus 1, sondern Du nutzt das DOM und bestimmst zur gefundenen Page previousElementSibling bzw. nextElementSibling. Das sind die Nachbar-Karten im DOM. Diese Eigenschaften liefern NULL, wenn Du auf dem ersten bzw. letzten Element bist, und mich deucht, dass Du in diesem Fall newPage gar nicht aufrufen musst.

Die Siblings brauchst Du eh - Du ermittelst sie im Moment manuell.

Eigentlich solltest Du newPage mit zwei Parametern aufrufen: Die aktuelle Seite, und der Sibling, der zur neuen Seite werden soll. In newPage kannst Du dann prüfen: Ist die neue Seite null - dann geh gleich wieder raus.

Andernfalls deaktiviere die bisherige Seite und aktiviere die neue Seite.

Das Ergebnis:

const turnPageLeft = () => {

    let page = document.querySelectorAll( '.page' );
    let doOnce;

    page.forEach( node => {
        if ( node.getAttribute( 'aria-selected' ) === 'true' && !doOnce ) {
            if ( !node.previousElementSibling )
                return;
            node.previousElementSibling.setAttribute( 'aria-selected', true );
            node.removeAttribute( 'aria-selected' );
            doOnce = true;
        }
    });

}

const turnPageRight = () => {

    let page = document.querySelectorAll( '.page' );
    let doOnce;

    page.forEach( node => {
        if ( node.getAttribute( 'aria-selected' ) === 'true' && !doOnce ) {
            if ( !node.nextElementSibling )
                return;
            node.nextElementSibling.setAttribute( 'aria-selected', true );
            node.removeAttribute( 'aria-selected' );
            doOnce = true;
        }
    });
}

const changePage = () => {
    let page = document.querySelectorAll( '.page' );
    page[0].setAttribute( 'aria-selected', true );
	document.body.addEventListener( 'keydown', ( e ) => {

		var key = e.keyCode;
		// l e f t - a r r o w - k e y
		if ( key === 37 ) { turnPageLeft(); }
		// r i g h t - a r r o w - k e y
		if ( key === 39 ) { turnPageRight(); }

	});
};

// R U N - S C R I P T

document.addEventListener( 'DOMContentLoaded', () => {
	if ( document.querySelector( '.change-page' ) )
        changePage();
});

Geht sicher noch eleganter.

Grüße
Boris