• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[HOW-TO/TUTORIAL] JS Variablen in HTML einbinden

jdown

New member
Hallo,
Ich will einen kleinen Test entwerfen, welcher über JS ausgewertet werden soll.
Ich habe nun Folgendes Problem! Die über den Button aufgerufene function Auswerten() stellt den Wert nicht da, welchen ich weiter unten über
Code:
Dein Ergebnis beträgt <script type/javascript">document.write(ergebnis)</script>
eigentlich darstellen will. Auch wenn ich die var ergebnis vorher global festlege wird nur der dort festgelegte Wert angezeigt und nicht der durch die Funktion veränderte wert!
Der ganze Code:
Code:
<html>
	<head>
		<title>Test</title>
		<script type="text/javascript">
		//Funktion um die Numerik eines objektes nachzuweisen
			var ergebnis = 0;
			function isNumber(n) {
				return !isNaN(parseFloat(n)) && isFinite(n);
			}
		
		//Aufruf der gesamten Auswertung
			function Auswerten(){
			//Funktion für Radio
				var antwort01 = document.getElementsByName('Frage01');
				for (var i = 0, length = antwort01.length; i < length; i++) {
					if (antwort01[i].checked) {
						if(antwort01[i].value == "richtig"){
							var wert01 = 100;
						}else{
							var wert01 = 0;
						}
						break;
					}
				}
				var antwort02 = document.getElementsByName('Frage02');
				for (var i = 0, length = antwort02.length; i < length; i++) {
					if (antwort02[i].checked) {
						if(antwort02[i].value == "richtig"){
							var wert02 = 100;
						}else{
							var wert02 = 0;
						}
						break;
					}
				}
				
			//Funktion für Checkbox
				var wert03 = 0;
				var antwort03 = document.getElementsByName('Frage03');
				for (var i = 0, length = antwort03.length; i < length; i++){
					if(antwort03[i].checked){
						if(antwort03[i].value == "richtig"){
							wert03 = wert03 + 50;
						}else{
							wert03 = wert03 - 50;
						}
					}
				}
				if(wert03 < 0){
					wert03 = 0;
				}
				
			//Funktion für SELECT
				var a = document.formular.Frage041;
				var antwort04 = a.options[a.selectedIndex].value;
				if(antwort04 == "richtig"){
					var wert04 = 34;
				}else{
					var wert04 = 0;
				}
				var a = document.formular.Frage042;
				var antwort04 = a.options[a.selectedIndex].value;
				if(antwort04 == "richtig"){
					wert04 = wert04 + 33;
				}else{
					wert04 = wert04 + 0;
				}
				var a = document.formular.Frage043;
				var antwort04 = a.options[a.selectedIndex].value;
				if(antwort04 == "richtig"){
					wert04 = wert04 + 33;
				}else{
					wert04 = wert04 + 0;
				}
			//Diese Funktion ist nur für Textfelder
				var antwort05 = document.getElementsByName("Frage05")[0].value; 
				if(antwort05 == "5"){
					var wert05 = 100;
				}else{
					var wert05 = 0;
				}
				
			//Berechnung des Ergebnisses
				window.ergebnis = ((wert01+wert02+wert03+wert04+wert05)*0.2);
				//document.getElementById('ergebnis').value = ergebnis;
			
			//Feedback
				if(ergebnis == 100){
					var feedback = "DER HAMMER!!! DU HAST DIE VOLLE PUNKTZAHL";
					
				}else if(ergebnis >= 90 && ergebnis < 100){
					var feedback = "Sehr gut, du bist nu einen kleinen Schritt von der Bestbewertung entfernt";
					
				}else if(ergebnis >= 65 && ergebnis < 90){
					var feedback = "Du bist auf einem guten Weg zu einer sehr guten Bewertung! - Weiter so!";
					
				}else if(ergebnis >= 45 && ergebnis < 65){
					var feedback = "Die hälfte ist geschafft!";
					
				}else if(ergebnis < 25){
					var feedback = "Du solltest dich dringend mit der Materie auseinandersetzen!";
				
				}else{
					var feedback = "Lies dir die Materialien lieber noch einmal durch!";
				}
			return feedback;
			}
			
		</script>
	</head> 
	<body> 
		<form name="formular">
		<input type="hidden" name="pflicht" value="Frage05">
		<!--Numerische Frage-->
			Wie viele Schulungsarten werden durch die SAP Education angeboten? <input type="number" name="Frage05">
		<!--Lückentext-->
			<br>SAP stellt mit der 
			<select name="Frage041">
				<option value="falsch" selected>bitte auswählen:
				<option value="richtig">SAP Education
				<option value="falsch">SAP Training
				<option value="falsch">SAP SelfMade
			</select>
			eine gute Basis für eine erfolgreiche Fortbildung zur verfügung.<br>
			Das von SAP angebotene E-Learning unterteil sich in zwei Bereiche,<br>
			einerseits werden durch 
			<SELECT NAME="Frage042">
				<OPTION VALUE="falsch" selected>bitte auswählen:
				<OPTION VALUE="falsch">Geschäftsprozessspezifische Schulungen
				<OPTION VALUE="richtig">Grundlagenschulungen
				<OPTION VALUE="falsch">individuelle Schulungen
			</SELECT>
			Einblicke in die webgestützten Angebote und praktischen Anwendungen von SAP ermöglicht,
			andererseits wird durch
			<SELECT NAME="Frage043">
				<OPTION VALUE="falsch" selected>bitte auswählen:
				<OPTION VALUE="richtig">Geschäftsprozesorientierte Schulungen
				<OPTION VALUE="falsch">Grundlagenschulungen
				<OPTION VALUE="falsch">nonverbale Schulungen
			</SELECT>
			ein tiefer<br> gehendes Verständnis spezieller Geschäftsprozesse gefördert.<br>
 
		<!--Single Choice-->
			Die Frage war was ihr könnt:<br>
			<input type="radio" name="Frage01" id="Frage01" value="richtig"> Nix<br>
			<input type="radio" name="Frage01" id="Frage01" value="falsch"> Allet <br>
			
			Die Frage war was ihr könnt:<br>
			<input type="radio" name="Frage02" id="Frage02" value="richtig"> Nix<br>
			<input type="radio" name="Frage02" id="Frage02" value="falsch"> Allet <br>
			
		<!--Multiple Choice-->
			Die Frage war was ihr könnt:<br>
			<input type="checkbox" name="Frage03" id="Frage03" value="richtig"> Nix<br>
			<input type="checkbox" name="Frage03" id="Frage03" value="falsch"> Allet <br>
			<input type="checkbox" name="Frage03" id="Frage03" value="falsch"> Allet <br>
			<input type="checkbox" name="Frage03" id="Frage03" value="richtig"> nicht viel <br>
			<input type="checkbox" name="Frage03" id="Frage03" value="falsch"> Allet <br>
			
		<!--Button-->
			<input type="button" value="Auswerten" onclick="Auswerten()"><br>
			
		<!--Auswertung-->
			<!--<input type="text" id="ergebnis" size="7" value="Ergebnis"><br>-->
			Dein Ergebnis beträgt <script type/javascript">document.write(ergebnis)</script><br>
			Nun zum Feedback: <script type="text/javascript">document.write(feedback)</script>
		</form>
	</body>
</html>

Wie bekomme ich dieses Problem gelöst?
 
Das Problem ist grundsätzlicher Natur: Vergiss document.write (so, als ob Du nie davon gehört hättest) und nutze andere DOM-Manipulationsmethoden wie .createElement, .appendChild(), .insertBefore() oder (meinetwegen auch) .innerHTML

Grund: document.write hat nur eine einzige eventuelle Daseinsberechtigung, wenn es nämlich während des initialen DOM-Aufbaus aufgerufen wird. Jeder nachträgliche Aufruf von document.write führt dazu, dass das aktuelle "document" vollständig zerstört und neu aufgebaut wird (inklusive des dort enthaltenen Javascript-Codes).

In Deinem Fall kommt noch erschwerend hinzu, dass Du document.write eigentlich nach Ablauf der "Auswerten()"-Funktion aufrufen müsstest (was aber wegen oben angegebener Begründung nicht funktionieren würde)

Also:
Code:
		//Aufruf der gesamten Auswertung
			function Auswerten(){
			//Funktion für Radio
				var antwort01 = document.getElementsByName('Frage01');
				for (var i = 0, length = antwort01.length; i < length; i++) {
					if (antwort01[i].checked) {
						if(antwort01[i].value == "richtig"){
							var wert01 = 100;
						}else{
							var wert01 = 0;
						}
						break;
					}
				}
				var antwort02 = document.getElementsByName('Frage02');
				for (var i = 0, length = antwort02.length; i < length; i++) {
					if (antwort02[i].checked) {
						if(antwort02[i].value == "richtig"){
							var wert02 = 100;
						}else{
							var wert02 = 0;
						}
						break;
					}
				}
				
			//Funktion für Checkbox
				var wert03 = 0;
				var antwort03 = document.getElementsByName('Frage03');
				for (var i = 0, length = antwort03.length; i < length; i++){
					if(antwort03[i].checked){
						if(antwort03[i].value == "richtig"){
							wert03 = wert03 + 50;
						}else{
							wert03 = wert03 - 50;
						}
					}
				}
				if(wert03 < 0){
					wert03 = 0;
				}
				
			//Funktion für SELECT
				var a = document.formular.Frage041;
				var antwort04 = a.options[a.selectedIndex].value;
				if(antwort04 == "richtig"){
					var wert04 = 34;
				}else{
					var wert04 = 0;
				}
				var a = document.formular.Frage042;
				var antwort04 = a.options[a.selectedIndex].value;
				if(antwort04 == "richtig"){
					wert04 = wert04 + 33;
				}else{
					wert04 = wert04 + 0;
				}
				var a = document.formular.Frage043;
				var antwort04 = a.options[a.selectedIndex].value;
				if(antwort04 == "richtig"){
					wert04 = wert04 + 33;
				}else{
					wert04 = wert04 + 0;
				}
			//Diese Funktion ist nur für Textfelder
				var antwort05 = document.getElementsByName("Frage05")[0].value; 
				if(antwort05 == "5"){
					var wert05 = 100;
				}else{
					var wert05 = 0;
				}
				
			//Berechnung des Ergebnisses
				window.ergebnis = ((wert01+wert02+wert03+wert04+wert05)*0.2);
				//document.getElementById('ergebnis').value = ergebnis;
			
			//Feedback
				if(ergebnis == 100){
					var feedback = "DER HAMMER!!! DU HAST DIE VOLLE PUNKTZAHL";
					
				}else if(ergebnis >= 90 && ergebnis < 100){
					var feedback = "Sehr gut, du bist nu einen kleinen Schritt von der Bestbewertung entfernt";
					
				}else if(ergebnis >= 65 && ergebnis < 90){
					var feedback = "Du bist auf einem guten Weg zu einer sehr guten Bewertung! - Weiter so!";
					
				}else if(ergebnis >= 45 && ergebnis < 65){
					var feedback = "Die hälfte ist geschafft!";
					
				}else if(ergebnis < 25){
					var feedback = "Du solltest dich dringend mit der Materie auseinandersetzen!";
				
				}else{
					var feedback = "Lies dir die Materialien lieber noch einmal durch!";
				}
                           // ergebnis und feedback darstellen
                           document.getElementById('ergebnis').innerHTML = ergebnis;
                           document.getElementById('feedback').innerHTML = feedback;
			}

Natürlich müsstest Du dafür HTML-Elemente (z.B. span) mit den entsprechenden IDs "ergebnis" und "feedback" erzeugen

Code:
		<!--Auswertung-->
			Dein Ergebnis beträgt <span id="ergebnis"></span><br>
			Nun zum Feedback: <span id="feedback"></span>
 
Vielen DANK!!!
es halt geholfen und Funktioniert hervorragend!

Edit:

wie kann ich denn jetzt z.B. die variable ergebnis mit 0 vorbelegen?
Jetzt erscheinen die ja erst wenn ich eine Auswertung starte...
 
Zuletzt bearbeitet:
So vielleicht?
Code:
		<!--Auswertung-->
			Dein Ergebnis beträgt <span id="ergebnis">0</span><br>
			Nun zum Feedback: <span id="feedback"></span>
 
Kleine Anmerkung: wieso verwendest du an ein paar Stellen globale Variablen? Die sind unnötig und selten eine gute Idee...
 
So vielleicht?
Code:
		<!--Auswertung-->
			Dein Ergebnis beträgt <span id="ergebnis">0</span><br>
			Nun zum Feedback: <span id="feedback"></span>

Das ist quasi meine erste Seite... Ich weiß noch nicht welche Vor- oder Nachteile globale oder lokale Daten haben... ich bekomme es ja nicht einmal hin, auf die Idee zu kommen die 0 in den HTML-Bereich zwischen den Span zu packen ;) Geschweige denn diesen Test auf meiner jimdo Site einzubinden! (also so, dass er auch was macht).
 
Zurück
Oben