Zwei ID's nicht möglich aber benötige ich. Tippt und tricks?

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

RXBeat

Mitglied
9 März 2019
92
0
6
41
Also, es zu erklären fällt mir gerade tatsächlich bisschen schwer.
Habe einen button mit dem befehl onclick="addNumb(5)"
Ein mal klicken schickt den befehl 5 raus. Der soll über Javascript abgefangen werden, eine art Taschenrechner.
Aber ich muss den zwei mal abgreifen. Ich muss dieser Zeile 2 ID's verpassen.
Egal wie wo und was ich gelesen habe, es geht nicht.
Existieren tricks? Möglich über Javascript so was zu machen?
ich habe diesen Button auch schon in ein div gemacht und dem div eine eigene ID verpasst und dem <button> selbst auch eine id.
Funktioniert jedoch nicht wirklich. Die blocken sich. Nur der aller erste wird erkannt.
Vielleicht seid ihr ja auch schon mal an diese grenze gestoßen und wisst wie man es umgehen kann.
Thanks
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.509
297
83
66
Tut mir Leid, aber das verstehe ich nicht :oops:
Meinst Du mit "zwei mal abgreifen", dass Du diese Funktion addNumb() bei einem Klick zwei Mal mit jeweils einem anderen Wert aufrufen willst?
 
Zuletzt bearbeitet:

RXBeat

Mitglied
9 März 2019
92
0
6
41

So kann man es besser erklären

Und hier der code.

Mein vorhaben zu erst war in Zeile 36 und 52 zwei ID's zu geben damit er die zwei mal abgreifen kann aber irgendwie kommt ich dann auch nicht weiter.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.509
297
83
66
Nachdem ich mir das Video angesehen habe, verstehe ich jetzt das Problem: Du willst die Daten im Localstorage speichern, um sie beim Neuladen wieder herstellen zu können. Dazu sollte es ausreichend sein, einen einzigen Datensatz unter "data" anzulegen.
 

RXBeat

Mitglied
9 März 2019
92
0
6
41
Das hat bei mir leider nicht funktioniert, darum hab ich es mit data2 versucht aber das hat auch nicht funktioniert. Der speichert immer nur total und nicht total2. Darum dachte ich erst das man einer HTML Zeile vielleicht 2 ID's verpassen kann damit die getrennt gezogen werden. Ich wollte die zweite ID dann so weiter leiten das es an data2 ankommt aber ich merke selbst das es absolut fuscharbeit ist :)
Komme aber nicht wirklich weiter, funktionieren tut es nicht. Bin froh das ich mit html klar komme, javascript ist noch bisschen too hard for me. Falls du zufällig genauer erklären könntest wo der fehler ist, würde ich mich freuen.
Hat jetzt auch nicht extrem eilig. Aber schon mal danke für die hilfe.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.509
297
83
66
Ich habe im Moment keine Zeit, um es vollständig und getestet ausarbeiten zu können, aber versuche, ob dir dies weiter hilft:
Code:
    <script>

        const consoleText = () => { };

        let bsk = 0;
        let fsb = 0;
        let bsk2 = 0;
        let fsb2 = 0;

        // Alle Werte im Localstorage sichern
        // Die Gesamtwerte nicht, sie werden beim Laden neu berechnet
        const saveAll = () => {
            localStorage.setItem('data', `{ "basketbaelle": ${bsk}, "fussbaelle": ${fsb},
               "basketbaelle2": ${bsk2}, "fuessbaelle2" ${fsb2} }`);
        }

        // Alle Werte aus dem Localstorage laden und wiederherstellen
        const restoreAll = () => {
            if (localStorage.getItem('data')) {
                let data = JSON.parse(localStorage.getItem('data'));
                bsk = data.basketbaelle;
                bsk2 = data.basketbaelle2;
                fsb = data.fussbaelle;
                fsb2 = data.fussbaelle2;
                document.getElementById('bsk').innerHTML = bsk;
                document.getElementById('bsk2').innerHTML = bsk2;
                document.getElementById('fsb').innerHTML = fsb;
                document.getElementById('fsb2').innerHTML = fsb2;
                document.getElementById('total').innerHTML = bsk + fsb;
                document.getElementById('total2').innerHTML = bsk2 + fsb2;
            }

            const addbsk = x => {
                bsk += x;
                document.getElementById('bsk').innerHTML = bsk;
                document.getElementById('total').innerHTML = fsb + bsk;
                // Alle Werte im Localstorage speichern
                saveAll();
            };

            const delbsk = x => {
                bsk -= x;
                document.getElementById('bsk').innerHTML = bsk;
                document.getElementById('total').innerHTML = fsb + bsk;
                // Alle Werte im Localstorage speichern
               saveAll();
            };

            // Ebenso bei den anderen add- und del-Funktionen die Werte
            // im Localstorage speichern
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.509
297
83
66
So, jetzt habe ich Zeit gefunden, es zum Laufen zu bringen. Waren auch noch ein paar Fehler drin. Außerdem habe ich mir erlaubt, das Ganze ein wenig zu vereinfachen, unter der Voraussetzung dass der Faktor für den Prozentwert immer gleich ist: Man braucht dann nur noch zwei Funktionen, addbsk() und addfsb().
Code:
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Calculator-Tool</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css?family=Roboto|sans-serif&display=swap');

        :root {
            --bg-color: #202124;
        }

        * {
            font-family: 'Google Sans', sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            background-color: #202124;
            color: #e8eaed;
        }

        /*  COUNTER */
        .ctr {
            border: 1px solid #8484841c;
            border-radius: 0px;
            margin: 0px;
            padding: 0px;
        }

        #counters {
            z-index: 99;
            text-align: center;
            margin: auto;
            position: fixed;
            bottom: 14px;
            width: 100%;
            margin-bottom: 0px;
            z-index: 100;
            background-color: #2a2a2a;
        }

        #counter1 {
            width: 50%;
            float: left;
        }

        #counter2 {
            width: 50%;
            float: right;
        }

        .ctr ul {
            margin: 0px;
        }

        .ctr ul li {
            display: inline;
        }

        .ctr h2 {
            padding: 0px;
            margin: 0px;
        }

        .displays {
            font-size: 1.3em;
            color: #00a800;
            margin: 0px;
        }
    </style>

</head>




<body id="body" onload="consoleText();restoreAll();">


    <!----- Counter ---->
    <div id="counters">


        <div>
            <p style="font-size:14px;">Total<br><a id="total">0</a></p>
            <p style="font-size:9px;"><a id="total2">0</a>%</p>

            <button
                style="position:fixed; bottom:57px; right:2px; font-size:12px; background-color:transparent;color:#888; border: none; outline: 0;"
                type="button" onclick="Reset()">⟲</button>
        </div>




        <!----- COUNTER TEST 1 ---->
        <div id="counter1" class="ctr">
            <h1 style="margin-top:0px; font-size:14px!important;">&nbsp;&nbsp;Fussball&nbsp;&nbsp;</h1>

            <p id="fsb" class="displays" style="font-size:16px">
                0
            </p>

            <div>
                <ul>
                    <li><button onclick="addfsb(5);" style="border-radius:3px;border:black;width:20px;">+5</button></li>
                    <li><button onclick="addfsb(1);"
                            style="border-radius:4px;border:black;width:40px;font-size:1em;background:#50D050;"
                            id="plus1fussball">+1</button></li>
                    <li><button onclick="addfsb(-1);" style="border-radius:3px;border:black;width:20px;">-1</button>
                    </li>
                </ul>
            </div>
        </div>


        <!----- COUNTER TEST 2 ---->
        <div id="counter2" class="ctr">
            <h1 style="margin-top:0px; font-size:14px!important;">&nbsp;&nbsp;Basketball&nbsp;&nbsp;</h1>

            <p id="bsk" class="displays" style="font-size:16px">
                0
            </p>

            <div>
                <ul>
                    <li><button onclick="addbsk(5);" style="border-radius:3px;border:black;width:20px;">+5</button></li>
                    <li><button onclick="addbsk(1);"
                            style="border-radius:4px;border:black;width:40px;font-size:1em;background:#50D050;"
                            id="plus1basketball">+1</button></li>
                    <li><button onclick="addbsk(-1);" style="border-radius:3px;border:black;width:20px;">-1</button>
                    </li>
                </ul>
            </div>
        </div>
    </div>



    <script>

        const consoleText = () => { };

        let bsk = 0;
        let fsb = 0;
        let bsk2 = 0;
        let fsb2 = 0;
        const factorFsb = 0.2,
            factorBsk = 0.445;

        const saveAll = () => {
            localStorage.setItem('data', `{ "basketbaelle": ${bsk}, "fussbaelle": ${fsb},
               "basketbaelle2": ${bsk2}, "fussbaelle2": ${fsb2} }`);
        }

        const restoreAll = () => {
            if (localStorage.getItem('data')) {
                console.log(localStorage.getItem('data'))
                let data = JSON.parse(localStorage.getItem('data'));
                bsk = data.basketbaelle;
                bsk2 = data.basketbaelle2;
                fsb = data.fussbaelle;
                fsb2 = data.fussbaelle2;
                document.getElementById('bsk').innerHTML = bsk;
                document.getElementById('fsb').innerHTML = fsb;
                document.getElementById('total').innerHTML = bsk + fsb;
                document.getElementById('total2').innerHTML = bsk2 + fsb2;
            }
        }

        const addbsk = x => {
            bsk += x;
            bsk2 += x * factorBsk
            document.getElementById('bsk').innerHTML = bsk;
            document.getElementById('total').innerHTML = fsb + bsk;
            document.getElementById('total2').innerHTML = fsb2 + bsk2;
            saveAll();
        };

        const addfsb = x => {
            fsb += x;
            fsb2 += x * factorFsb;
            document.getElementById('fsb').innerHTML = fsb;
            document.getElementById('total').innerHTML = fsb + bsk;
            document.getElementById('total2').innerHTML = fsb2 + bsk2;
            saveAll();
        };
        const Reset = () => {
            bsk = 0;
            fsb = 0;
            document.getElementById('bsk').innerHTML = bsk;
            document.getElementById('fsb').innerHTML = fsb;
            document.getElementById('total').innerHTML = 0;
            bsk2 = 0;
            fsb2 = 0;
            document.getElementById('bsk2').innerHTML = bsk;
            document.getElementById('fsb2').innerHTML = fsb;
            document.getElementById('total2').innerHTML = 0;
            localStorage.removeItem('data');
        };

    </script>

</body>

</html>
 

RXBeat

Mitglied
9 März 2019
92
0
6
41
Sorry für die späte Antwort. Vielen vielen dank! Läuft perfekt. Also fast perfekt :)
Das zweite funktioniert astrein! Hab nur noch eine frage..
Das zeigt glaub ich 12 stellen nach dem Komma an. Wie könnte ich es auf 4 stellen nach dem Komma begrenzen?
Ich dachte das bekomme ich mit html hin aber war wieder nichts.
 

RXBeat

Mitglied
9 März 2019
92
0
6
41
Hab es versucht aber das Ergebnis war jetzt leider nicht das wahre :( Magst mir zeigen wo ich das einfüge? Sorry. Hab es echt lange versucht.
 
Werbung: