ein-ausgabe von Zahlen in webseite

roland_k

Hallo Zusammen,

ich habe das reduziert auf zwei Zellen einer Tabelle:

links ein input (zahlen max 3 stellig) (Eingabe Rot)
rechts ein <td>Ausgabe Rot</td>

pasted-from-clipboard.png

in den drei Zeilen 1 2 3 sind Input felder , gebe ich in Zeile 2 den wert 12 ein , soll in der Ausgabe Spalte 12 * (Faktor)2 = 24 erscheinen.

wie sieht der javascript Code dazu aus ??

Danke
Gruss roland

Sempervivum

So etwas ist eine Standardaufgabe, die relativ häufig vorkommt.

Statte deine Tabelle so mit Klassen aus:

Code

            <tr>
                <td class="faktor">1</td>
                <td class="eingabe"><input></td>
                <td class="ausgabe"></td>
            </tr>
            <tr>
                <td class="faktor">2</td>
                <td class="eingabe"><input></td>
                <td class="ausgabe"></td>
            </tr>
            <tr>
                <td class="faktor">3</td>
                <td class="eingabe"><input></td>
                <td class="ausgabe"></td>
            </tr>

Alles anzeigen

Und setze dieses Javascript an das Ende des Body, vor das schließende </body>:

Code

    <script>
        // Eventlistener für input-Event irgendwo auf der
        // Seite registrieren:
        document.addEventListener('input', event => {
            // Handelt es sich um das Eingabefeld in der Tabelle?
            if (event.target.matches('td.eingabe input')) {
                const
                    // Ausgehend vom Eingabefeld die Zeile
                    // in der Tabelle ermitteln:
                    row = event.target.closest('tr'),
                    // Den Faktor ermitteln:
                    faktor = row.querySelector('td.faktor').textContent,
                    // Die Tabellenzelle für die Ausgabe ermitteln:
                    ausgabe = row.querySelector('td.ausgabe'),
                    // Den eingegebenen Wert bereit stellen:
                    eingabe = event.target.value,
                    // Das Ergebnis berechnen:
                    ergebnis = eingabe * faktor;
                // Das Ergebnis in die Tabellenzelle eintragen:
                ausgabe.textContent = ergebnis;
            }
        });
    </script>

Alles anzeigen

roland_k

Vielen Dank.

aber ich hänge wieder , ich habe mal was hochgestellt:

Bitte anschauen, Danke

Sempervivum

Du kannst die eingegebenen Zahlen im Localstorage speichern siehe hier:

JavaScript/Web Storage – SELFHTML-Wiki

roland_k

tja ich suche da seit Wochen rum. (ev. bin zu bloede ?? )

primitives Beispiel:

Code

<input name="" type="text" id="storage">

ich starte die Webseite: storage.html

dann gebe ich in das Input-feld den Text "demo" oder "test" ein.

bei F5 Taste bleibt der Input inhalt erhalten. (demo oder test)

beim Neu eröffnen von Firefox ist das Feld Leer.

also. wenn ich die seite storage.html neu im Firefox öffne soll in dem Input-feld demo oder test stehn .

genau dazu brauche ich den Code , damit ich das auf die geamte webseite (20 inputfelder) einrichten kann.

Mit Datei Speichern --> storage.html bleiben die Werte im Input-feld erhalten, aber wenn das speichern vergessen wird , sind die werte und die Berechnungen weg

SINN: innerhalb vom Firefox Eingaben machen, diese berechnen und visuell Ergebniss anzeigen. ohne Server - Internet usw , autark nur im Firefox.

bitte die zwei oder drei zeilen Code, dann kann ich das nachvollziehn.

unzählige Beispiele im Netz haben mir nicht geholfen (zu bloede halt)

Danke im voraus

GRUSS

ROLAND_k

tk1234

Zitat von roland_k

bitte die zwei oder drei zeilen Code, dann kann ich das nachvollziehn.

Nein. Das ist ein Forum, kein Codelieferservice. Stell deinen Code online, dann lässt sich nachvollziehen was falsch ist, aber so völlig ohne Code lässt sich das nicht sagen …

Sempervivum

Etwas mehr als ein, zwei Zeilen Code sind es schon. Ersetze das Javascript durch dieses und versuche anhand meiner Kommentare zu verstehen, wie es funktioniert:

Code

    <script>
        const
            // Tabellenzeilen bereit stellen:
            rows = document.querySelectorAll('table tr'),
            // Eingegebene Wert aus dem Localstorage lesen:
            valuesJson = localStorage.getItem('values');
        //Waren schon Werte im Localstorage?
        if (valuesJson) {
            const
                values = JSON.parse(valuesJson);
            // Über alle Tabellenzeilen:
            for (let i = 0; i < rows.length; i++) {
                // Den Wert aus dem Localstorage in das Eingabefeld eintragen:
                rows[i].querySelector('td.eingabe input').value = values[i];
                // Ergebnis berechnen und in Tabellenzelle eintragen:
                const
                    faktor = rows[i].querySelector('td.faktor').textContent,
                    ausgabe = rows[i].querySelector('td.ausgabe'),
                    ergebnis = values[i] * faktor;
                ausgabe.textContent = ergebnis;
            }
        }
        // Eventlistener für input-Event irgendwo auf der
        // Seite registrieren:
        document.addEventListener('input', event => {
            // Handelt es sich um das Eingabefeld in der Tabelle?
            if (event.target.matches('td.eingabe input')) {
                const
                    // Ausgehend vom Eingabefeld die Zeile
                    // in der Tabelle ermitteln:
                    row = event.target.closest('tr'),
                    // Den Faktor ermitteln:
                    faktor = row.querySelector('td.faktor').textContent,
                    // Die Tabellenzelle für die Ausgabe ermitteln:
                    ausgabe = row.querySelector('td.ausgabe'),
                    // Den eingegebenen Wert bereit stellen:
                    eingabe = event.target.value,
                    // Das Ergebnis berechnen:
                    ergebnis = eingabe * faktor;
                // Das Ergebnis in die Tabellenzelle eintragen:
                ausgabe.textContent = ergebnis;

                // Ein Array mit den Eingaben bereit stellen:
                const
                    values = [];
                // Über alle Tabellenzeilen:
                rows.forEach(row => {
                    // Den eingegebenen Wert in das Array eintragen:
                    const
                        eingabe = row.querySelector('td.eingabe input').value;
                    values.push(eingabe);
                    // Und das Array im Localstorage speichern:
                    localStorage.setItem('values', JSON.stringify(values));
                });
            }
        });
    </script>

Alles anzeigen

Jetzt mitmachen!