Probleme mit JavaScript

peoplez0815

New member
Hallo Leute, ich versuche seit einigen Monaten mir JavaScript beizubringen.
Bisher lief es eigentlich ganz gut, ich konnte meine Fehler immer finden und beseitigen. Ich habe mich vor kurzem an ein Quizspiel getraut, welches ich aus einem Buch habe. Ich habe das Programm samt HTML erst selbst geschrieben und später mit dem Buch abgeglichen. Natürlich hatte ich einige Fehler, war auch alles gut. Nur jetzt habe ich alles genauso wie es im Buch steht und das Programm funktioniert dennoch nicht. Ich habe das Buch natürlich auch beiseite gelegt und selbst recherchiert aber ich komme zu keinem Ergebnis. Ich habe langsam wirklich Kopfschmerzen und hoffe jemand kann mir hier mal auf die Sprünge helfen.
Bitte.....

Problem: Die Funktion mit der das Javascript abgerufen werden soll funktioniert nicht.(Meine Vermutung). // <div onclick="starteNeueRunde();"style="font-size:20px;background: #C2CFE4; border-radius: 70px;width: 550px; height: 150px;border: 20px solid #264B87;margin: 30px auto;text-align: center;box-shadow: inset 20px 10px 15px grey;"><p id="Frage">Willkommen zum Quiz</p><p id="Antworten">Klicke hier, um dein Quiz zu starten</p></div>


Hier das komplette Programm:

Code:
<!DOCTYPE html>

<html>
<head>
<title>QuiZZZzz</title>
<meta charset="utf-8">

<style>
  .auswahl {
  float: left; position: relative;
  background: white;
  height: 120px; width: 100px;
  margin: 20px; padding: 10px;
  font-size: 100px;
  box-shadow: 15px 15px 15px grey;
  }
  </style>
  </head>

<body style="background:silver;">


<div onclick="starteNeueRunde();"
style="font-size:20px;
background: #C2CFE4; border-radius: 70px;
width: 550px; height: 150px;
border: 20px solid #264B87;
margin: 30px auto;
text-align: center;
box-shadow: inset 20px 10px 15px grey;">
<p id="Frage">Willkommen zum Quiz</p>
<p id="Antworten">Klicke hier, um dein Quiz zu starten</p>
</div>

<div style="width: 500px; height: 200px; margin: 1px auto; text-align: center">
<p id="1" class="auswahl" onclick="tippeButton(this);">1</p>
<p id="2" class="auswahl" onclick="tippeButton(this);">2</p>
<p id="3" class="auswahl" onclick="tippeButton(this);">3</p>
</div>
</body>



<script>

var fragen = new Array();
var runden = 0;
var richtigeAntwort;
var gesperrt = true;
var punkte = 0;

definiereDieFragen();




function tippeButton(gewaehlterButton){
	if(gesperrt){return}
	gesperrt = true;
	gewaehlterButton.style.boxShadow = "10px 10px 20px grey inset";
	if(gewaehlterButton.getAttribute("id") == richtigeAntwort) {
		punkte++;
	}
	else{gewaehlterButton.style.background = "#FF0000";
	}
}


function starteNeueRunde(){
	document.getElementById("1").style.boxShadow = "15px 15px 15px grey";
	document.getElementById("1").style.background = "white";
	document.getElementById("2").style.boxShadow = "15px 15px 15px grey";
	document.getElementById("2").style.background = "white";
	document.getElementById("3").style.boxshadow = "15px 15px 15px grey";
	document.getElementById("3").style.background = "white";
	
	if ( runden < 5 ){
		gesperrt = false;
		runden++;
		
		dieFrage = fragen.shift();
		var frageAufbereitet = dieFrage.split("#");
		document.getElementById("Frage").innerHTML = frageAufbereitet[0];
		document.getElementById("Antworten").innerHTML = frageAufbereitet[1];
		richtigeAntwort = frageAufbereitet[2];
		setTimeout(starteNeueRunde,3000);
		
	}else{
		alert ("Das Spiel ist zu Ende. Du hast " + punkte + " Punkte geholt");
	}
}


function definiereDieFragen(){
	
	fragen[0] = "Was ist keine Programmiersprache?#
	1) JavaScript 2) HTML5 3) Python#2";
	fragen[1] = "Wie heisst ein bekanntes Programm zum Knacken von Passwörtern?#
	1) BruteForce 2) Powershell 3) JohnTheRipper#3";
	fragen[2] = "Wie wird die Schnittstelle zwischen Hard- und Software bei einem Computer auch genannt?#
	1) Kernel 2) CPU 3) Motherboard#1";
	fragen[3] = "Wie heisst der größte Planet in unserem Sonnensystem?#
	1) Erde 2) Saturn 3) Jupiter#3";
	fragen[4] = "Was war Jules Verne?#
	1) Autor 2) Astronom 3) Physiker#1";
	fragen[5] = "Wie heisst der erste Mann auf dem Mond?#
	1) Juri Gagarin 2) Nil Armstrong 3) Ed Mitchel#2";
	fragen[6] = "Mit welchem Mittel kann man seine IP Adresse verschleiern?#
	1)VPN 2) CSS 3) TKKG#1";
	fragen[7] = "Wann endete der zweite Weltkrieg?#
	1) 1950 2)1939 3)1945#3";
	fragen[8] = "Wo wurde BamBam geboren?#
	1) Egeln 2) Hamm 3) Frose#3";
	fragen[9] = "Was ist ein roter Riese?#
	1) Pickel 2) Himmelskörper 3) Artilleriegeschoss#2";
	
	
	for(var i=1; i<9; i++){
		fragen.sort( function(a,b){return Math.random()-0.5;} );
	}
}


</script>
</html>
 
Zuletzt bearbeitet von einem Moderator:

bitmuncher

Moderator
Deine Multiline-Strings sind falsch.

Code:
	fragen[0] = "Was ist keine Programmiersprache?#
	1) JavaScript 2) HTML5 3) Python#2";
Sowas funktioniert nicht und wenn du in deinem Browser mal die Javascript-Konsole/Entwicklertools öffnest, bekommst du dafür auch eine entsprechende Fehlermeldung:

Code:
Uncaught SyntaxError: Invalid or unexpected token
Bei Multiline-Strings muss die Zeile mit einem Backslash enden. Also:

Code:
	fragen[0] = "Was ist keine Programmiersprache?# \
	1) JavaScript 2) HTML5 3) Python#2";
 

peoplez0815

New member
Vielen Dank für deine Hilfe,

es lag tatsächlich an den Backslashes. Ich habe eben nochmal im ganzen Buch rumgeblättert konnte zu dem Thema aber nichts finden. Danke!

Habe zwar noch einen Fehler gefunden aber es war zum Glück nur ein Rechtschreibfehler :)
Danke bitmuncher

Mit freundlichen Grüßen
peoplez
 
Zuletzt bearbeitet:
Oben