JS-Variable in HTML ausgeben

c-i-k-o · 03. Okt. 2016

Hallo Zusammen,

ich habe zwei Aufgaben via js implementiert und möchte diese auch bepunkten. Teilpunkte sollen ebenso möglich sein.

Jetzt habe ich in der check1 funktion die variable p1 -> wenn antwort richtig dann 5 punkte wenn falsch dann 0.
bei check2 habe geht das ganze genauso.

funktion punkte() soll nun diese punkte addieren. anschließend sollen die punkte per html auf der seite angezeigt und aktualisiert werden. Bsp wenn frage 1 gelöst und frage2 ausstehend dann zeige punkte für frage1 an und aktualisiere mit jeder richtig gelösten frage.

wie man sicher am code sehen kann bin ich ein newbie in js und habe alles zusammengebastelt was ich im internet finden konnte - nur leider komme ich mit dem genannten Problem nicht klar. bei der erstellung des codes bin ich auf dieses forum gestoßen und wurde immer gut fündig, deswegen bitte ich auch bei diesem Problem um eure Hilfe.
vielen Dank im Voraus.

im folgenden der code:

HTML:

....
 function check1() {
        r1 = document.getElementById("r1").value;
        r2 = document.getElementById("r2").val;
       
        if (r1 == r2) {
            p1 = 5;
            alert("Korrekt! Sehr gut! Sie haben " + p1 + " Punkte erreicht");
        } else {
 p1 = 0;
            alert("Leider falsch. Die richtige Loesung ist " + r2);
        }
        generateTask();
    }

    function check2() {

        a1 = document.getElementById("a1").value;
        if (a1 == "ja" ) {
            p2 = 3;
            alert("Korrekt! Sehr gut! Sie haben " + p2 + " Punkte erreicht");
        } else {
p2 = 0;        
    alert("Leider falsch");
        }

    }

    function punkte() {
        pg = p1+p2;
        pg = document.getElementById("pg").innerHTML=i;

    }
        generateTask();


</script>


<body onload="generateTask()">

<p>Die Summe von <strong id="s1"></strong> und <strong id="s2"></strong> ist?</p>
<p><input id="r1" width="3"/></p>
<p><button id="r2" onclick="check1()">Pruefe</button></p>

<p>2 gerade oder ungerade </p>
<p><input id="a1" width="3"/></p>
<p><button id="a1" onclick="check2()">Pruefe</button></p>

<p>Gesamtpunkte</p>
<p><div id="pg"></div></p>
-

</body>
</html>

Gwunderi · 04. Okt. 2016

c-i-k-o schrieb:
wie man sicher am code sehen kann bin ich ein newbie in js und habe alles zusammengebastelt was ich im internet finden konnte.

Ja, das sieht man in der Tat - :d! Der Code hat so viele Fehler, dass ich gar nicht wüsste, wo anfangen, Kunststück funktioniert es nicht.

Weiss auch nicht genau, ob Du das willst:

Erst soll im ersten Input-Feld die Summe zweier Zahlen eingetippt werden, und mit Klick auf den 1. Button "Prüfe" eben geprüft werden, ob die Summe stimmt.

Woher kommen aber diese beiden Zahlen, die addiert werden sollen? Sollen zwei Zufallszahlen generiert werden? oder woher soll das Programm sie kennen, bzw. wer/wo werden sie eingetippt?

Wenn das geklärt ist:
Soll man im 2. Input-Feld angeben, ob die Summe eine gerade oder ungerade Zahl ist?
Dann sollte die Frage aber nur lauten: "Ist die Summe eine gerade Zahl?", nur dann kann man mit "ja" oder "nein" antworten.
Und das if (a1 == "ja") - alert "korrekt" würde dann auch nicht immer stimmen, die Antwort kann ja auch "nein" lauten, müsste man das also auch anpassen, wie den meisten Code : )))

Also die erste wichtigste Frage scheint mir mal, woher die beiden Zahlen kommen, deren Summe man im ersten Schritt eintippen soll?

kkapsner · 04. Okt. 2016

Dein Fehler in der Funktion punkte() ist, die Zeile

Code:

pg = document.getElementById("pg").innerHTML=i;

, die muss

Code:

document.getElementById("pg").innerHTML = pg;

heißen, damit der Code formal richtig ist, ABER du verlässt dich hier auf globale Variablen, was man auf keinen Fall machen sollte - v.A. wenn die Variablen noch so nichtssagend heißen.

Du solltest das also dringend umarbeiten und mehr mit Funktionsrückgabewerten arbeiten.

c-i-k-o · 04. Okt. 2016

Gwunderi schrieb:
Woher kommen aber diese beiden Zahlen, die addiert werden sollen? Sollen zwei Zufallszahlen generiert werden? oder woher soll das Programm sie kennen, bzw. wer/wo werden sie eingetippt?
....

Also die erste wichtigste Frage scheint mir mal, woher die beiden Zahlen kommen, deren Summe man im ersten Schritt eintippen soll?

Sorry ich habe den Code nicht ganz angegeben

also die zwei Zahlen sind Zufallszahlen die zuvor generiert werden:

Code:

<html>

<script language="javascript" type="text/javascript">

    function generateTask() {

        s1 = Math.floor (Math.random()*100);
        s2 = Math.floor (Math.random()*100);
        r2 = s1+s2;
        document.getElementById("s1").innerText = s1;
        document.getElementById("s2").innerText = s2;
        document.getElementById("r2").val = r2;

    }

    function check1() {
        r1 = document.getElementById("r1").value;
        r2 = document.getElementById("r2").val;
        p1 = 0;
        if (r1 == r2) {
            p1 = 5;
            alert("Korrekt! Sehr gut! Sie haben " + p1 + " Punkte erreicht");
        } else {
            alert("Leider falsch. Die richtige Loesung ist " + r2);
        }
        generateTask();
    }

    function check2() {

        a1 = document.getElementById("a1").value;
        p2 = 0;
        if (a1 == "ja" ) {
            p2 = 3;
            alert("Korrekt! Sehr gut! Sie haben " + p2 + " Punkte erreicht");
        } else {
            alert("Leider falsch");
        }

    }

    function punkte() {
        pg = p1+p2;
        pg = document.getElementById("pg").innerHTML=pg;

    }
        generateTask();


</script>


<body onload="generateTask()">

<p>Die Summe von <strong id="s1"></strong> und <strong id="s2"></strong> ist?</p>
<p><input id="r1" width="3"/></p>
<p><button id="r2" onclick="check1()">Pruefe</button></p>

<p>2 gerade oder ungerade </p>
<p><input id="a1" width="3"/></p>
<p><button id="a1" onclick="check2()">Pruefe</button></p>

<p>Gesamtpunkte</p>
<p><div id="pg"></div></p>
-

</body>
</html>

das hier ist also der gesamte Code

Gwunderi schrieb:
Wenn das geklärt ist:
Soll man im 2. Input-Feld angeben, ob die Summe eine gerade oder ungerade Zahl ist? .....

das ist einfach eine Frage die prüft ob die Ziffer "2" gerade oder ungerade ist

mir fiel auf die schnelle solch eine triviale frage ein um eine zweite aufgabe hinzuzufügen.

Meine Hauptaufgabe besteht darin: die Gesamtpunkte aus mehreren Teilpunkten von gelösten Aufgaben zu summieren und diese später in eine Datenbank zu speichern. Ich sollte mir überlegen wie aus so einem "script" die Punkte rausgefiltert werden können, dazu habe ich mir überlegt die variable punkte zu jeder Aufgabe zu deklarieren und am ende diese in gesamtpunkte zusammenzurechnen, um am ende nur die gesamtpunkte auszulesen und diese in die datenbank zu speichern....
deswegen ist dieses Script sozusagen ein mock um irgendwelche aufgaben darzustellen, es geht lediglich um die Punkte.

ich würde mich über jede unterstützung seeeeeeehr freuen

kkapsner schrieb:
Dein Fehler in der Funktion punkte() ist, die Zeile

Code:

pg = document.getElementById("pg").innerHTML=i;

, die muss

Code:

document.getElementById("pg").innerHTML = pg;

heißen, damit der Code formal richtig ist, ABER du verlässt dich hier auf globale Variablen, was man auf keinen Fall machen sollte - v.A. wenn die Variablen noch so nichtssagend heißen.

Du solltest das also dringend umarbeiten und mehr mit Funktionsrückgabewerten arbeiten.

danke für deine hilfe ich habe es jetzt so umgeändert aber es wird als ausgabe nur "-" ausgegeben. ich möchte dass die anzeige mit jedem erreichten punkt aktualisiert wird. wie kann man so etwas realisieren.

was meinst du genau mit Funktionsrückgabewerten arbeiten?

Besten Dank!

kkapsner · 05. Okt. 2016

Ui... es wird mit deinen globalen Variablen noch schlimmer, da du sie nicht initialisierst... du solltest dir dringend das Wissen aneignen, wie man in JS sauber mit Variablen arbeitet (v.A. das var Stichwort).

Wo wird denn die Funktion punkte() überhaupt aufgerufen? Ich sehe im Code nur die Definition.

Das mit den Rückgabwerten ist recht einfach:

Code:

function a(){
	return 1;
}
function b(){
	return 2;
}
function c(){
	alert(a() + b());
}
c();

c-i-k-o · 05. Okt. 2016

kkapsner schrieb:
Ui... es wird mit deinen globalen Variablen noch schlimmer, da du sie nicht initialisierst... du solltest dir dringend das Wissen aneignen, wie man in JS sauber mit Variablen arbeitet (v.A. das var Stichwort).

Wo wird denn die Funktion punkte() überhaupt aufgerufen? Ich sehe im Code nur die Definition.

Das mit den Rückgabwerten ist recht einfach:

Code:

function a(){ return 1; } function b(){ return 2; } function c(){ alert(a() + b()); } c();

kkapsner vielen Dank für deine Hinweise. Ich habe mich nochmal schlau gemacht und den folgenden Code erzeugt. Dieser Funktioniert nun wie ich es haben will aber eine Sache noch nicht ganz. Und zwar möchte ich, dass beim Klicken auf den Punkte Button nur die variable check1().p1 und check2().p2 aufgerufen werden. aber in dem jetzigen Stand ist es so, dass auch die if anweisungen ausgeführt werden - weil ja die gesamte funktion aufgerufen wird. gibt es eine möglichkeit nur die variable rauszufiltern?

HTML:

<html>

<script language="javascript" type="text/javascript">

function zahl() {
		zahl1 = 10;
		zahl2 = 30;
		zahl3 = 20;
		zahl4 = 40;
		document.getElementById("zahl1").innerText = zahl1;
        document.getElementById("zahl2").innerText = zahl2;
		document.getElementById("zahl3").innerText = zahl3;
        document.getElementById("zahl4").innerText = zahl4;
}
      function check1() {
		
		var ergebnis = zahl1 + zahl2;
        ergebnis = document.getElementById("ergebnis").val=ergebnis;
		eingabe = document.getElementById("eingabe").value;
		var  p1 = 0;
		if (eingabe == "") {
		alert ("Keine Eingabe");
		} else {
        if (eingabe == ergebnis) {
            p1 = 5;
            alert("Krichtig " + p1 + " Punkte erreicht");
			   
        } else {
		 p1 = 1;
            alert("falsch. richtige Loesung ist " + ergebnis);
			    
        }
		}
		return p1;
    }
 

   function check2() {
		var ergebnis2 = zahl3 + zahl4;
        ergebnis2 = document.getElementById("ergebnis2").val=ergebnis2;
		eingabe2 = document.getElementById("eingabe2").value;
        var p2 = 0;
		if (eingabe2 == "") {
		alert ("Keine Eingabe");
		} else {
		if (eingabe2 == ergebnis2) {
            p2 = 3;
            alert("richtig! " + p2 + " Punkte erreicht");
			   
        } else {
		 p2 = 1;
            alert("falsch. richtige Loesung ist " + ergebnis2);
			    
        }
		}
		
		return p2;
    }


    function punkte() {
 
	 var pg = check1() + check2();
	 eingabe = document.getElementById("pg").val = pg;
	 
	alert(pg);
 
    }
  


</script>

<body onload="zahl()">

<p>Die Summe von <strong id="zahl1"></strong> und <strong id="zahl2"></strong> ist?</p>
<p><input id="eingabe" width="3"/></p>
<p><button id="ergebnis" onclick="check1()">Pruefe</button></p>
    
<p>Die Summe von <strong id="zahl3"></strong> und <strong id="zahl4"></strong> ist?</p>
<p><input id="eingabe2" width="3"/></p>
<p><button id="ergebnis2" onclick="check2()">Pruefe</button></p>


<p>Gesamtpunkte</p>
<p><button id="pg" onclick="punkte()">Punkte</button></p>

</body>
</html>

Gwunderi · 05. Okt. 2016

Hallo c-i-k-o

Erstens, sorry, hatte nicht gecheckt, dass es nicht der gesamte Code war ...
Habe jetzt etwas funktionierendes gebastelt, siehe unten, muss nur noch schauen, wie man die Inputfelder nach den Durchgängen wieder leert (habe es vergessen, kommt aber bald nach):

HTML:

<script>
       total = 0;
    function generateTask() {
        s1 = Math.floor (Math.random()*100);
        s2 = Math.floor (Math.random()*100);
        r2 = s1+s2;
        document.getElementById("s1").innerText = s1;
        document.getElementById("s2").innerText = s2;
    }

    function check1() {
        r1 = document.getElementById("r1").value;
        p1 = 0;
        if (r1 == r2) {
            p1 = 5;
            alert("Korrekt! Sehr gut! Sie haben " + p1 + " Punkte erreicht");
        } else {
            alert("Leider falsch. Die richtige Loesung ist " + r2);
        }
total = total + p1;
document.getElementById("pg").innerHTML = "Gesamtpunkte: " + total; 

    }
function check2() {
        a1 = document.getElementById("a1").value;
        p2 = 0;
        if (a1 == "ja" ) {
            p2 = 3;
            alert("Korrekt! Sehr gut! Sie haben " + p2 + " Punkte erreicht");
        } else {
            alert("Leider falsch");
        }
total = total + p2;        
document.getElementById("pg").innerHTML = "Gesamtpunkte: " + total; 
        generateTask();}
</script>


<body onload="generateTask()">

<p>Die Summe von <strong id="s1"></strong> und <strong id="s2"></strong> ist?</p>
<p><input id="r1" width="3"/></p>
<p><button onclick="check1()">Pruefe</button></p>

<p>2 gerade oder ungerade </p>
<p><input id="a1" width="3"/></p>
<p><button onclick="check2()">Pruefe</button></p>

<p id="pg">Gesamtpunkte</p>




</body>
</html>

- - - Aktualisiert - - -

Kleiner Nachtrag:
Dachte erst, Du willst die Gesamtpunktzahl von allen Durchläufen, aber bei Deinem neuen Code sieht's eher so aus, als wolltest Du nur die des jeweiligen Durchlaufs?

Falls ja:
Dann muss man das Total am Anfang des neuen Durchgangs auf 0 setzen, also nicht an den Anfang des Scripts, wo es beim neuen Funktionsaufruf "generateTask()" ignoriert wird.

Sieht dann so aus:

Code:

<script>
function generateTask() {
        total = 0;
        document.getElementById("pg").innerHTML = "Gesamtpunkte";
        s1 = Math.floor (Math.random()*100);
        …

Jetzt ist beim neuen Durchgang das Total auf 0 und und die Anzeige der Gesamtpunktzahl ist "verschwunden".

Hat aber den kleinen Haken:
Am Ende des Durchgangs wird ja die Gesamtpunktzahl hingeschrieben, und sofort auch ein neuer Durchgang gestartet, der diese wieder auf 0 setzt (und die Anzeige "verschwinden" lässt) - und zwar so schnell hintereinander, dass man das Gesamttotal gar nie zu Gesicht bekommt.

Sehe somit als einzige Lösung, den neuen Durchgang "generateTask()" nicht am Ende des Skripts aufzurufen, sondern als separater Aufruf in einem Button, etwa so:

Code:

<button onclick="generateTask()">neue Aufgabe</button>

Und den Aufruf "generateTask()" am Ende des Skripts natürlich löschen.

Weiss nicht, ob Du mit meinem Code etwas anfangen kannst, falls nicht, war es für mich eine gute Übung, bin auch (noch) keine Expertin


Habe auch noch nicht herausgefunden, wie die Inputfelder wieder leeren, es klappt nicht (der Code funktioniert aber trotzdem einfach durch Überschreiben).

c-i-k-o · 05. Okt. 2016

@Gwunderi ich danke dir vielmals! das hat mich um einiges weitergebracht. Habe es jetzt genauso abgeändert. :redface:

Gwunderi · 05. Okt. 2016

Freut mich!

mikdoe · 05. Okt. 2016

ist es damit gelöst?

kkapsner · 06. Okt. 2016

c-i-k-o schrieb:
Habe es jetzt genauso abgeändert.

Da sind leider immer noch lauter (unnötig) globale Variablen drin. Das wird dir irgendwann Probleme bereiten.

c-i-k-o · 06. Okt. 2016

kkapsner schrieb:
Da sind leider immer noch lauter (unnötig) globale Variablen drin. Das wird dir irgendwann Probleme bereiten.

Danke für den Hinweis, die habe ich jetzt auch gelöst mit var und Funktionsrückgabewerten, so wie du es vorgeschlagen hattest.

kkapsner · 06. Okt. 2016

Sehr schön. Wäre jetzt noch super, wenn du deine Lösung hier zeigen könntest.

c-i-k-o · 06. Okt. 2016

Klar kann ich machen. Vorsicht ist nicht ganz so sauber abgeklärt - soll auch vorerst nur eine testseite sein um eine anwendung zu testen

HTML:

<html>

<script language="javascript" type="text/javascript">

total = 0;
function zahl() {
		zahl1 = 10;
		zahl2 = 30;
		zahl3 = 20;
		zahl4 = 40;
		document.getElementById("zahl1").innerText = zahl1;
        document.getElementById("zahl2").innerText = zahl2;
		document.getElementById("zahl3").innerText = zahl3;
        document.getElementById("zahl4").innerText = zahl4;
}
      function check1() {
		
		var ergebnis = zahl1 + zahl2;
        ergebnis = document.getElementById("ergebnis").val=ergebnis;
		eingabe = document.getElementById("eingabe").value;
		var  p1 = 0;
		if (eingabe == "") {
		alert ("Keine Eingabe");
		} else {
        if (eingabe == ergebnis) {
            p1 = 5;
            alert("Krichtig " + p1 + " Punkte erreicht");
			   
        } else {
		 p1 = 0;
            alert("falsch. richtige Loesung ist " + ergebnis);
			    
        }
		}
		//return p1;
		total = total + p1;
document.getElementById("punktegesamt").innerHTML = "Gesamtpunkte: " + total;
    }
 

   function check2() {
		var ergebnis2 = zahl3 + zahl4;
        ergebnis2 = document.getElementById("ergebnis2").val=ergebnis2;
		eingabe2 = document.getElementById("eingabe2").value;
        var p2 = 0;
		if (eingabe2 == "") {
		alert ("Keine Eingabe");
		} else {
		if (eingabe2 == ergebnis2) {
            p2 = 3;
            alert("richtig! " + p2 + " Punkte erreicht");
			   
        } else {
		 p2 = 0;
            alert("falsch. richtige Loesung ist " + ergebnis2);
			    
        }
		}
		
		//return p2;
		total = total + p2;        
document.getElementById("punktegesamt").innerHTML = "Gesamtpunkte: " + total; 
    }
  
 function punkte(){
     var gesamtpunkte = total;
     
     return total;
 }

</script>

<body onload="zahl()">

<p>Die Summe von <strong id="zahl1"></strong> und <strong id="zahl2"></strong> ist?</p>
<p><input id="eingabe" width="3"/></p>
<p><button id="ergebnis" onclick="check1()">Pruefe</button></p>
    
<p>Die Summe von <strong id="zahl3"></strong> und <strong id="zahl4"></strong> ist?</p>
<p><input id="eingabe2" width="3"/></p>
<p><button id="ergebnis2" onclick="check2()">Pruefe</button></p>

<p id="punktegesamt">Gesamtpunkte</p>
<p><button id="punktegesamt" onclick="punkte()">Submit</button></p>

</body>
</html>

kkapsner · 09. Okt. 2016

Du hast da immer noch unnötig globale Variablen und außerdem tut die Funktion punkte() nichts sinnvolles.

PS: eine konsistente Einrückung deines Codes würde das Lesen auch um einiges einfacher machen.

c-i-k-o · 10. Okt. 2016

du hast recht, aber wie gesagt, dass ist nur eine dummy-Seite um eine andere Anwendung zu testen. Das auslesen der Variable punktegesamt ist hier am wichtigsten. Die Funktion punkte() hatte ich verwendet, aber jetzt ist sie nicht mehr relevant, also ja kann sie gelöscht werden.

kkapsner · 11. Okt. 2016

c-i-k-o schrieb:
Das auslesen der Variable punktegesamt ist hier am wichtigsten.

Wer liest aus? Es existiert auch keine Variable punktegesamt... nur gesamtpunkte und die kann von niemanden ausgelesen werden, da sie nichts tut...

PS: Ich habe gerade gesehen, dass du IDs doppelt verwendest. Das darf nicht sein - IDs müssen dokumentenweit eindeutig sein.

JS-Variable in HTML ausgeben

c-i-k-o

New member

Gwunderi

New member

kkapsner

Super Moderator

c-i-k-o

New member

kkapsner

Super Moderator

c-i-k-o

New member

Gwunderi

New member

c-i-k-o

New member

Gwunderi

New member

mikdoe

Moderator

kkapsner

Super Moderator

c-i-k-o

New member

kkapsner

Super Moderator

c-i-k-o

New member

kkapsner

Super Moderator

c-i-k-o

New member

kkapsner

Super Moderator