ubuntuusers.de

Hallo,

ich möchte ein einfaches php oder html skript erstellen, welches es ermöglicht, einen festen Faktor mit einem einen variablen Faktor (über ein Eingabefenster) zu multiplizieren.

z.B.

Rechnner 1: 4,00 * [ ] = ___

Erklärung: In den Klammern soll das Eingabefenster sein, dahinter soll direkt (ohne Buttonklick) das Ergebnis erscheinen

Von diesen Feldern soll es mehrere geben, alle einzelnen Ergebnisse sollen am Ende addiert werden

z.B.

Ergebnis Rechner 1 + Ergebnis Rechner 2

Mit OpenOffice Calc wäre die Umsetzung kinderleicht, deswegen kann ich mir vorstellen, das dies auch mit php oder html keine sehr schwere Aufgabe ist.

Meine Frage wäre ob das gane generell möglich ist und wenn ja, was die einzelnen Befehle für das multiplizieren is, sowie das addieren später.

Wie benutzt man Variablen mit php?

Ich hoffe jemand kann mir eine Antwort auf die Fragen geben, oder mir nennen, wo ich weitere Informationen finde. Ich würde von niemandem verlangen wollen, dieses Skript für mich umzusetzen.

Leider habe ich so gut wie keine php-Kentnisse, würde mir diese aber auch gern aneignen

MFG

Umsteiger666

Hi!

Mit HTML alleine wirst du da nicht weit kommen, weil HTML lediglich statische Inhalte ausgeben kann. PHP wäre mit kanonen auf Spatzen geschossen, und benötigt in jedem Fall einen Request an den Server (Formular absenden).

Leichter könnte sowas mit JavaScript gehen. Aber meine Kenntnisse sind ein wenig eingerostet.

1

<input type="text" onblur="document.getElementById('result').appendChild(document.createTextNode(this.value*4))" /><p id="result"></p>

Ohne das jetzt getestet zu haben, es geht bestimmt noch besser, aber der Ansatz müsste auf jeden Fall stimmen. ☺

~jug

Moinsen,

leider geht das mit PHP nicht umszusetzen. PHP kann keine Events auslösen. Du möchtest ja, dass nach dem Eintragen eines Wertes in einer Textbox die Berechnung gestartet wird. PHP kann immer nur aktiv werden, wenn du ein Formular absendest, da PHP auf dem Server ausgeführt wird. Du sendest also alle Daten an ein Skript auf dem Server, der führt die Berechnung durch und sendet das Ergebniss an den Client (Webbrowser) zurück.

Für die Lösung der Aufgabenstellung wirst du um ein JavaScript nicht drum rum kommen. JS wird beim Client ausgeführt, benötigt also kein Absenden eines Formulars und kann auf Events "lauschen" (Eintrag in eine TextBox).

Als kleine Erläuterung:

In der Textbox definierst du ein OnKeyUp-Ereignis. Das Ereignis tritt ein, wenn die Textbox den Focus hat und eine Taste losgelassen wird, also eine Eingabe erfolgt ist

1
2

<input type="text" id="test" onkeyup="calculateProduct()">  
<span id="id"><!-- Hier wird durch die JS-Funktion das Ergebnis der Multiplikation eingetragen --></span>

dann schreibst du eine JavaScript Function:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<script type="text/javascript">
    function calculateProduct() {
        // Eingabe überprüfen (ist es eine Zahl...)

        // Produkt berechnen wenn Validierung erfolgreich

        // Produkt einem Element zuweisen
        document.getElementById("id").innerText = product; 
    }
</script>

Ich hoffe das war ausführlich genug um es umzusetzen. Viel Spaß, ansonsten meld dich einfach...

Vielen Dank für die flotten und ausführlichen Informationen,

ich habe mit JS zwar überhaupt keine Erfahrungen, aber ich werde es bestimmt hinbekommen mich da reinzulesen und reinzudenken.

MFG

Umsteiger

Als kleine Erläuterung:

In der Textbox definierst du ein OnKeyUp-Ereignis. Das Ereignis tritt ein, wenn die Textbox den Focus hat und eine Taste losgelassen wird, also eine Eingabe erfolgt ist

1 2	<input type="text" id="test" onkeyup="calculateProduct()"> <span id="id"><!-- Hier wird durch die JS-Funktion das Ergebnis der Multiplikation eingetragen --></span>

dann schreibst du eine JavaScript Function:

1 2 3 4 5 6 7 8 9 10

<script type="text/javascript"> function calculateProduct() { // Eingabe überprüfen (ist es eine Zahl...) // Produkt berechnen wenn Validierung erfolgreich // Produkt einem Element zuweisen document.getElementById("id").innerText = product; } </script>

Ich hoffe das war ausführlich genug um es umzusetzen. Viel Spaß, ansonsten meld dich einfach...

Also das Eingabefeld ohne Button habe ich. Aber eine Rechnung und die Ausgabe des Ergebnisses ist in dem Code nicht drin oder?

<input type="text" id="test" onkeyup="function rechnen()">  
<span id="id"><!-- Hier wird durch die JS-Funktion das Ergebnis der Multiplikation eingetragen --></span>

  <script language="javascript" type="text/javascript">
  <!--
  function rechnen() {

        var id = document.getElementsByName("id")[0].value;
        var ergebnis = id * 4;
        document.getElementsByName("ergebnis")[0].value = ergebnis;
                     }
  //--></script>

<tr><td>Ergebnis:</td>
<td><input type="text" name="ergebnis" readonly="readonly"></input></td></tr>

Das ist mein Versuch die Rechnung und das Ergebnis darzustellen, aber es funktioniert nicht, und ich weiß auch noch nicht so hundertprozentig, was ich da überhaupt gemacht habe...

Ich möchte das die im Formular Einegegebene Zahl zu der Variable "id" wird. Danach soll die Variable "Ergebnis" das Ergebnis aus der Multiplikation von einer festen Zahl und "id" werden.

Dann soll das Ergebnis readonly in einem anderen Kasten ausgegeben werden.

Wenn das Grundprinzip funktionieren würde, könnte ich es ja theoretisch mit vielen weiteren Variablen erweitern.

Ich hoffe mein Gedanke ist verständlich,

Vielen Dank für eure Hilfe

MFG

Umsteiger

Hier ein Beispiel:

Rechnung.html:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">


<head>

<title>Rechnung</title>

<script type="text/javascript" src="Rechnung.js"></script>

</head>


<body>

<form name="calculation">
	<p><input name="input" type="text" value="0" onkeyup="calculate();"/></p>
	<p><input name="input" type="text" value="0" onkeyup="calculate();"/></p>
	<p><input name="input" type="text" value="0" onkeyup="calculate();"/></p>
	<p><input name="input" type="text" value="0" onkeyup="calculate();"/></p>
	<p><input name="input" type="text" value="0" onkeyup="calculate();"/></p>
	<p><input name="result" type="text" value="0" readonly="readonly"/></p>
</form>

</body>


</html>

Rechnung.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

function calculate() {
	var sum = 0.0;
	var form = document.calculation;
	var inputs = form.input;
	for(var index = 0; index < inputs.length; ++index) {
		var input = inputs[index];
		var value = parseFloat(input.value);
		sum += 4 * value;
	}
	form.result.value = String(sum);
}

phst schrieb:

Hier ein Beispiel: [...]

Klasse, das kommt schon sehr nah an das was ich mir vorgestellt habe. So wie ich den Code verstehe ist es allerdings nicht möglich verschiedene Multiplikatoren für die Unterschiedlichen Zeilen einzusetzen.

Die Summe der einzelnen Eingaben wird doch einfach mit 4 multipliziert oder?

Verstehe ich es richtig, das jede Eingabe im Formular zu einer Variable "input" bzw. "inputs" wird?

Vielen Dank

MFG

Umsteiger

Für alles mit Websiten immer hilfreich ist Selfhtml, auch in deinem Beispiel : http://de.selfhtml.org/javascript/beispiele/taschenrechner.htm

dominator schrieb:

Für alles mit Websiten immer hilfreich ist Selfhtml, auch in deinem Beispiel : http://de.selfhtml.org/javascript/beispiele/taschenrechner.htm

Danke, aber ist dies nicht einfach nur ein html-Formular in Form eines Taschenrechners?

ja?! aber er zeigt trotzdem alles, was du brauchst.