Logikfehler im Code

[leo.sobe]

Hallo Zusammen

Ich Programmiere ein Abfragetool, um Wörter abzufragen. Ähnlich wie eine Karteikästchen.

Wenn der User auf dem rechten Butten drückt , soll sich die Variabel data_postion um eins erhöht werden. Und wenn er auf linken Butten drückt soll das Umgekehrte passieren.

Rechst: Funktioniert gut, nur am Anfang muss ich zwei Mal drücken (komisch)
Links: Funktioniert nicht gut (Scheisse) , man muss immer zwei mal drücken (sehr komisch)

Die Funktion „data_postion1“ ist zuständig für die Erhöhung oder Erniedrigung der Variable data_postion.

Ich versteh das nicht, vielleicht versteht es ihr, wer weiss!

Danke im Voraus meine lieben oder bösen Freunde, ich hoffe ihr könnt mir helfen, wenn nicht, dann könnt ihr mir, wie es aussieht nicht helfen.

Den Code könnt ihr kopieren, es ist alles clientseitig.

Hier der Code, Tobt euch aus:

<script type="text/javascript" src="../jquery.flip.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript" src="../jquery.flip.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<style>
#flipbox {	
	width: 700px; 
	height: 435px; 
	background-color:rgba(0,204,255,1);
	}
	
#flipped {
	position:relative; 
	top: 10%; 
	left: 50%;
	margin-left:-200px;
	background: #FF8D2C; 
	width: 400px; 
	height: 250px;
	text-align:center;
	padding-top:50px;
	}

#flipped p {
	font:"Lucida Console", Monaco, monospace;
	font-size:24pt;
	color:rgba(255,255,255,1);
	font-weight:bolder;
	position:relative;
	}
	

	
#menu {
	position:relative;
	width:400px;
	left:50%;
	margin-left: -200px;
	margin-top:10%;
	background-color:rgba(255,0,0,1);
	text-align:center;
	}



</style>

<div id="flipbox">
	<div id="flipped">
        <p id="flip-deutsch"></p>
        <p id="flip-englisch" style="display:none"></p>
    </div><!–end flipped–>
    
    <div id="menu">
    	<input type="button" id="flip-l-b" name="links" value="Links" />
		<span id="a-woerter">1 - 34</span>
		<input type="button" id="flip-r-b" name="rechts" value="rechts" />
        <input type="button" id="flip" name="flip" value="Uebersetzen" />

    </div><!–end menu–>
</div><!–end flipbox–>

<script type="text/javascript">
		
	var data_position = 0; 
	
	
	//Wörter 
	var data = {"woerter":[{"listenVokabeln_id":"1","listen_id":"4","vokabel_de":"Heute","vokabel_fs":"today"},{"listenVokabeln_id":"2","listen_id":"4","vokabel_de":"Ja","vokabel_fs":"Yes"},{"listenVokabeln_id":"3","listen_id":"4","vokabel_de":"I em ","vokabel_fs":"ich vin"}]};
		
		
		//Zeigt die Wörter an
		function show_data (nr) {
			alert(nr);
			$('#flipped').fadeOut();
			$('#flipped').fadeIn('fast'); 
			$('#flip-deutsch').text(data.woerter[nr].vokabel_de);
			$('#flip-deutsch').text(data.woerter[nr].vokabel_de);
			}
		
		
		//Erhöt oder macht es um 1 kleiner die var data_position und gibt sie zurück 
		function data_postion1 (richtung) {
				
				if (richtung == true) {
					if (data_position < data.woerter.length) {
						
						data_position = data_position++; 
						return data_position++;
						}else {
							
								//dem User Fragen ob er die Übung wiederholen soll.
								var reply = false
								reply = confirm("Wollen Sie die Übung wiederholen?")
								
								if (reply == true) {
									
									return data_position = 0; 
									}else {
										
										window.location="index.php";
										}* 					
							} 
					}else {
						
						//
						if (data_position > 0) {
						return data_position--;
						}else {
							return data_position = 0;
							}
						
						} 				
			}
		
		
		//Wenn der User auf  #flip-l-b clickt
		$("#flip-l-b").click(function() {
		 	
			show_data(data_postion1(false));

		})
			//Wenn der User auf  #flip-l-b clickt
			$("#flip-r-b").click(function() {
						
			 
			show_data(data_postion1(true));

		})
		
			$("#flip").click(function() {
			ubersetzen ();

		})
	
//Das englische Wort wied angezeigt 
function ubersetzen () {
	
	$('#flip-englisch').toggle();
	
	}
</script>

 

[matiro65]

Ich habe die Funktion geändert, probier mal ob meine Version auch für Dich passt. Ich kriege noch Fehlermeldungen bezüglich anderer Teile des Codes die ich ignoriert habe, aber das rauf/runter von data_position sollte so funktionieren.

function data_postion1 (richtung) {
				
			if (richtung == true) {
				if (data_position < data.woerter.length) {
					data_position++;
					}
				else {
					//dem User Fragen ob er die Übung wiederholen soll.
					var reply = false
					reply = confirm("Wollen Sie die Übung wiederholen?")
					if (reply == true) {
						data_position = 0; 
						}
					else {
						window.location="index.php";
						} 					
					} 
				}
			else {
				//
				if (data_position > 0) {
					data_position--;
					}
				else {
					data_position = 0;
					}
				} 				
			console.log(data_position);
			}

 

[leo.sobe]

Hallo matiro65

Danke für deine Hilfe!

Es funktioniert, aber leider nicht gut. Am Schluss geht er immer eins weiter als er sollte.

 

[kkapsner]

Du hattest ein kleinen Fehler im Vergleich mit der Länge des Arrays:

	//Erhöt oder macht es um 1 kleiner die var data_position und gibt sie zurück 
	function data_postion1(richtung) {

		if (richtung) {
			if (data_position + 1 < data.woerter.length) {

				data_position += 1;
				return data_position;
			} else {

				//dem User Fragen ob er die Übung wiederholen soll.
				var reply = false
				reply = confirm("Wollen Sie die Übung wiederholen?")

				if (reply == true) {

					return data_position = 0;
				} else {

					window.location = "index.php";
				} 
			}
		} else {

			//
			if (data_position > 0) {
				data_position -= 1;
				return data_position;
			} else {
				data_position = 0;
				return data_position;
			}

		}
	}