JavaScript Problem bei Ausgabe einer Berechnung

02/04/2016 15:39 phreeak#1

Hoffe ich bin hier richtig.
Wollte ne kleine rechen Hilfe f�r meine Mutter machen (damit sie nicht immer mitm Taschenrechner hantieren muss), allerdings sind meine html Kentnisse auch schon 5 Jahre alt und vieles vergessen :p

Hoffe ich bin hier richtig. Irgendwo hab ich nen Fehler. Es kommt jedenfalls zu keinem Ergebnis:

Spoiler

Hab auch mal versucht in das Ergebnis nur nen Text zu schreiben, wenn man den Button klickt, aber passiert nichts. H�tte nicht gedacht, dass man in 5 Jahre soviel vergisst O.o

02/04/2016 16:00 Devsome#2

Hallo phreeak,

hier mal deine Version die nun klappt.

Code:

<form>

habe ich raus genommen, da du dies nicht brauchst. Arbeitest mit Javascript

Code:

<script>

habe ich nach unten gepackt, damit sich erst dein HTML Inhalt l�dt und dann dein Script geladen wird.
In dem Script musstest du nach den document.getElementById noch den .value anh�ngen, vorher hast du die ganze Box bekommen. [Only registered and activated users can see links. Click Here To Register...]

Code:

<html>
<head>
	<title>Taschenrechner</title>
</head>
<body>
	<div>
		<label for="Proteine">Proteine:</label>
		<input type="text" id="proteine" name="proteine" />
	</div>
	
	<div>
		<label for="Kohlenhydrate">Kohlenhydrate:</label>
		<input type="text" id="Kohlenhydrate" name="Kohlenhydrate" />
	</div>
	
	<div>
		<label for="Fett">Fett:</label>
		<input type="text" id="Fett" name="Fett" />
	</div>
	
	<div>
		<label for="Balaststoffe">Balaststoffe:</label>
		<input type="text" id="Balaststoffe" name="Balaststoffe" />
	</div>
	
	<div>
		<input type="button" value="Ergebnis" onclick="Ergebnis()" />
	</div>
	
	<div>
		<label name="Ergebnis">Punkte:</label>
		<input type="text" id="Ergebnis" name="Ergebnis" value="0" />
	</div>
</body>
<script>
	function Ergebnis() {
		var a = document.getElementById("proteine").value;
		var b = document.getElementById("Kohlenhydrate").value;
		var c = document.getElementById("Fett").value;
		var d = document.getElementById("Balaststoffe").value;
		var punkte = Math.round(((a * 16) + (b * 19) + (c * 45) + (c * 5)) / 175);
		document.getElementById("Ergebnis").value = punkte;
	}
</script>
</html>

02/04/2016 16:09 phreeak#3

Vielen, vielen lieben dank :)

Ja mit dem .value hatte ich auch zuerst. Hab ich so auch damals gelernt. Aber irgendwie wollte es nicht und hab mir dann auch paar bspl. codes auf wc3schools usw angesehen und da war nicht immer ".value" angegeben. Daher hatte ich es nachm Test weggelassen..

Also im Grunde war das Script an der falschen Stelle platziert?

02/04/2016 17:37 Devsome#4

In diesem Fall k�nnte man das Script auch nach oben platzieren, aber im besten Fall ist wenn es nach dem HTML Code geladen wird.

02/04/2016 17:52 Icetea#5

Quote:

Originally Posted by Devsome

In diesem Fall k�nnte man das Script auch nach oben platzieren, aber im besten Fall ist wenn es nach dem HTML Code geladen wird.

Braucht man nicht mehr seit HTML 5, Stichwort "async-Attribute" :) Einfach mal in die Suchmaschine eingeben.

Du gibst in die Felder nur zahlen ein, daher kannst du den type der Inputs auch entsprechend ab�ndern, vielleicht noch tabindex und required tags hinzuf�gen.

Eine Frage bleibt, warum machst du es mit Javascript? Mit PHP k�nntest du den ganzen Kram da noch besser abfragen und vor allem simpler in meinen Augen!

Liebe Gr��e,
Icetea'

02/04/2016 18:44 Devsome#6

Quote:

Originally Posted by Icetea'

Braucht man nicht mehr seit HTML 5, Stichwort "async-Attribute" :) Einfach mal in die Suchmaschine eingeben.

Du gibst in die Felder nur zahlen ein, daher kannst du den type der Inputs auch entsprechend ab�ndern, vielleicht noch tabindex und required tags hinzuf�gen.

Eine Frage bleibt, warum machst du es mit Javascript? Mit PHP k�nntest du den ganzen Kram da noch besser abfragen und vor allem simpler in meinen Augen!

Liebe Gr��e,
Icetea'

F�nde jQuery f�r sowas ja noch praktischer.
Stichwort: [Only registered and activated users can see links. Click Here To Register...]
Kleines Beispiel was ich gefunden habe: [Only registered and activated users can see links. Click Here To Register...]