Hilfe bei JavaScript

[Boris Bär]

Ich habe den Code nochmal umgeschrieben, damit er etwas sauberer ist.

JavaScript und JQuery zu vermischen scheints Tragisches zu sein wie ich recherchiert habe. Vor allem wegen der FadeIn-Funktion kann ich nicht darauf verzichen.

In der Index-HTML stehen die Variablen und die allgemeine Funktion zum Umblättern.

Achtung: Das Script sollte ganz am Ende der Seite stehen, unter dem </body>-Tag.

var pageNumber = 1;

var previousPage = document.getElementById("previous_page");

var nextPage = document.getElementById("next_page");

previousPage.addEventListener("click", function(){

	if ( pageNumber == 1 ) { return false; }

	else if ( pageNumber == 2 ) {
		$("input#previous_page").hide();
		$("img#previous_page-disabled").show();
		$("#text_page_02").hide();
		$("#text_page_01").fadeIn(600);
		pageNumber--;
		document.querySelector('#pageNumber').textContent = pageNumber;
	}

	else if ( pageNumber == 3) {
		$("#text_page_03").hide();
		$("#text_page_02").fadeIn(600);
		pageNumber--;
		document.querySelector('#pageNumber').textContent = pageNumber;
	}

	else if ( pageNumber == 4) {
		$("#text_page_04").hide();
		$("#text_page_03").fadeIn(600);
		pageNumber--;
		document.querySelector('#pageNumber').textContent = pageNumber;
	}

	else if ( pageNumber == 5) {
		$("#text_page_05").hide();
		$("#text_page_04").fadeIn(600);
		pageNumber--;
		document.querySelector('#pageNumber').textContent = pageNumber;
	}

	else if ( pageNumber == 6) {
		$("#text_page_06").hide();
		$("#text_page_05").fadeIn(600);
		pageNumber--;
		document.querySelector('#pageNumber').textContent = pageNumber;
	}

	else if ( pageNumber == 7) {
		$("#text_page_07").hide();
		$("#text_page_06").fadeIn(600);
		pageNumber--;
		document.querySelector('#pageNumber').textContent = pageNumber;
	}

	else if ( pageNumber == 8) {
		$("#text_page_08").hide();
		$("#text_page_07").fadeIn(600);
		pageNumber--;
		document.querySelector('#pageNumber').textContent = pageNumber;
	}

	else if ( pageNumber == 9) {
		$("#text_page_09").hide();
		$("#text_page_08").fadeIn(600);
		pageNumber--;
		document.querySelector('#pageNumber').textContent = pageNumber;
	}

	else if ( pageNumber == 10) {
		$("#text_page_10").hide();
		$("#text_page_09").fadeIn(600);
		pageNumber--;
		document.querySelector('#pageNumber').textContent = pageNumber;
	}

});

nextPage.addEventListener("click", function(){

	if ( pageNumber == 1 ) {
		$("input#previous_page").show();
		$("img#previous_page-disabled").hide();
		$("#text_page_01").hide();
		$("#text_page_02").fadeIn(600);
		pageNumber++;
		document.querySelector('#pageNumber').textContent = pageNumber;
	}

	else if ( pageNumber == 2 ) {
		$("#text_page_02").hide();
		$("#text_page_03").fadeIn(600);
		pageNumber++;
		document.querySelector('#pageNumber').textContent = pageNumber;
	}

	else if ( pageNumber == 3 ) {
		$("#text_page_03").hide();
		$("#text_page_04").fadeIn(600);
		pageNumber++;
		document.querySelector('#pageNumber').textContent = pageNumber;
	}

	else if ( pageNumber == 4 ) {
		$("#text_page_04").hide();
		$("#text_page_05").fadeIn(600);
		pageNumber++;
		document.querySelector('#pageNumber').textContent = pageNumber;
	}

	else if ( pageNumber == 5 ) {
		$("#text_page_05").hide();
		$("#text_page_06").fadeIn(600);
		pageNumber++;
		document.querySelector('#pageNumber').textContent = pageNumber;
	}

	else if ( pageNumber == 6 ) {
		$("#text_page_06").hide();
		$("#text_page_07").fadeIn(600);
		pageNumber++;
		document.querySelector('#pageNumber').textContent = pageNumber;
	}

	else if ( pageNumber == 7 ) {
		$("#text_page_07").hide();
		$("#text_page_08").fadeIn(600);
		pageNumber++;
		document.querySelector('#pageNumber').textContent = pageNumber;
	}

	else if ( pageNumber == 8 ) {
		$("#text_page_08").hide();
		$("#text_page_09").fadeIn(600);
		pageNumber++;
		document.querySelector('#pageNumber').textContent = pageNumber;
	}

	else if ( pageNumber == 9 ) {
		$("#text_page_09").hide();
		$("#text_page_10").fadeIn(600);
		pageNumber++;
		document.querySelector('#pageNumber').textContent = pageNumber;
	}

	else if ( pageNumber == 10 ) {
		$("#text_page_10").hide();
		$("#text_page_11").fadeIn(600);
		pageNumber++;
		document.querySelector('#pageNumber').textContent = pageNumber;
	}

});

document.addEventListener("DOMContentLoaded", function(){

	if ( pageNumber == 1 ) {
		$("#previous_page").hide();
		$("#previous_page-disabled").show();
	}

	else { return false; }

});

Ich habe jetzt elf Text-Seiten eingestellt. Natürlich bläht sich das Script mit jeder Seite auf, aber für meine Zwecke benötige ich eigentlich nie mehr als zehn Text-Seiten. Es gibt bestimmt noch eine Möglichkeit, diesen Teil des Codes dynamisch zu machen, damit man nicht für jede Text-Seite einen if-Eintrag benötigt, aber leider ist mir nicht bekannt, wie das geht.

Der EventListener mit der DOMContentLoaded-Bedingung dient dazu, den linken Pfeil immer auszublenden, sobald die Seite geladen wurde.

Da die maximale Seitenzahl ja bei jedem Text variiert, füge ich bei jeder Seite noch diesen kleinen Code-Abschnitt ebenfalls am Ende der Seite ein.

Aber wieder Achtung: Wenn beide Code-Abschnitte sich in demselben HTML-Dokument befinden, dann sollte der kleine Abschnitt vor dem großen stehen.

document.getElementById("next_page").addEventListener("click", function(){

	if ( pageNumber >= 2) {
		$("input#next_page").hide();
		$("img#next_page-disabled").show();
	}
	else { return false; }

});

document.getElementById("previous_page").addEventListener("click", function(){

if ( pageNumber == 3 ) {
	$("input#next_page").show();
	$("img#next_page-disabled").hide();
}
else { return false; }

});

Das war’s auch schon! Ich dachte, ich teile meine Lösung mal, falls es jemanden interessiert.

Herzlichen Dank nochmal an Euch beide für die Hilfe!