JavaScript Problem bei Ausgabe einer Berechnung

phreeak · 02/04/2016, 15:39

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

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

Devsome · 02/04/2016, 16:00

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.

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>

phreeak · 02/04/2016, 16:09

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?

Devsome · 02/04/2016, 17:37

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.

Icetea · 02/04/2016, 17:52

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'

Devsome · 02/04/2016, 18:44

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:

Kleines Beispiel was ich gefunden habe: