Beiträge von Sempervivum

    <div class="stapel">
        <div>0</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>

    <div style="text-align: center; font-size: 13px; margin-top: 10px;">

        <a onclick="popupCenter({ url: 'thread1404-onclick-event.html', title: 'Popup', w: 350, h: 750 });">

            <strong>NN</strong>

        </a>

        <br />

        <a href="#ort">Ort</a> (Südost)

    </div>

    <script>

        const popupCenter = ({ url, title, w, h }) => {

            const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : window.screenX;

            const dualScreenTop = window.screenTop !== undefined ? window.screenTop : window.screenY;

            const width = window.innerWidth || document.documentElement.clientWidth || screen.width;

            const height = window.innerHeight || document.documentElement.clientHeight || screen.height;

            const systemZoom = width / window.screen.availWidth;

            const left = (width - w) / 2 / systemZoom + dualScreenLeft;

            const top = (height - h) / 2 / systemZoom + dualScreenTop;




            const newWindow = window.open(url, title, `scrollbars=yes, width=${w / systemZoom}, height=${h / systemZoom}, top=${top}, left=${left}`);




            if (window.focus) {

                newWindow.focus();

            }

        };

    </script>

    notenZeilen.forEach((zeile, index) => {
        // forEach liefert nicht nur das aktuelle Element selbst
        // auch seinen Index.
        if(index == 0) {
            // Es handelt sich um die erste Zeile mit der Überschrift.
            // Mach etwas damit oder ignoriere sie.
        } else {
        // Es handelt sich nicht um die Überschrift.
            // Zeile am Semikolon aufsplitten:
            const zeileSplitted=zeile.split(';');
            // Ein Objekt mit Fach und Note an das Ergebnis-Array anhängen:
            notenArray.push({ fach: zeileSplitted[0], note: zeileSplitted[1] });
        }
    });

// CSV-Text zum Testen bereit stellen:
    const noten = `Fach;Note
Englisch;2
Mathe;4`,
        // In Zeilen aufsplitten::
        notenZeilen = noten.split('\n');
    // Leeres Array für das Ergebnis bereit stellen:
    let notenArray = [];
    // Alle Zeilen durchlaufen:
    notenZeilen.forEach(zeile => {
        // Zeile am Semikolon aufsplitten:
        const zeileSplitted=zeile.split(';');
        // Ein Objekt mit Fach und Note an das Ergebnis-Array anhängen:
        notenArray.push({ fach: zeileSplitted[0], note: zeileSplitted[1] });
    });

    <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>

            <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>

    <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>