Beiträge von Sempervivum

Leider ist mir keine andere Lösung bekannt. Vielleicht kennt aber jemand anders eine.

Außer eine andere Programmiersprache zu verwenden wie Java. Da tut man sich dann leichter, wenn man mit lokalen Dateien arbeitet.

Zitat

Ich habe schon vermutet, dass <a> ebenfalls als Elternelement zählt und deswegen noch ein parentNode drangehängt, aber das ändert auch nichts.

Eigentlich trifft das aber zu, das <a> zählt mit. Um das Ganze übersichtlicher zu machen, empfehle ich aber, die Verschachtelung von einem Button in einem <a> wegzulassen. Diese ist nicht valide und das hat seine Gründe: Was soll jetzt beim Klick ausgeführt werden, der click-Handler der Buttons oder das Javascript im href-Attribut des <a>?

Einen Webserver lokal installieren, z. B. WAMP? Davon kannst Du vielleicht auch später noch profitieren, falls Du dich mit PHP beschäftigst.

Poste am besten auch das HTML, das dazu gehört, denn davon hängt es ab, wie Du im DOM navigieren musst. Von deiner Beschreibung her müsste es funktionieren, denn this.parentNode wäre das <td> und davon das parentNode das <tr>, jedenfalls wenn das HTML so aufgebaut ist wie bisher.

Zitat

aber was mir aufgefallen ist:

die zeit wird nur gezählt wenn das fenster aktiv ist.

und pro minute mit einer echten uhr läuft das script pro minute ca. 6 sek langsamer.

Beides kann man beheben, wenn man nicht einfach herauf zählt sondern die Startzeit merkt und dann die Differenz bildet, etwa so:

https://jsfiddle.net/Sempervivum/L95gjhtw/17/

Ja, weiß ich, freut mich, dass dir der Name gefällt. Es ist auch eine Pflanzengattung:

html-seminar.de/woltlab/attachment/2129/

Zitat

Wenn's alte Jahr erfolgreich war, dann freue dich aufs neue. Und war es schlecht, ja dann erst recht.

Danke, ich wünsche ebenfalls allen Forenmitgliedern ein frohes neues Jahr!

Was Du brauchst ist ein Identifier für den Chart bzw. das Dataset, damit Du die Variablen auswählen kannst. Sehe ich mir das Ganze in der Consolausgabe an, ergibt sich, dass dies der datasetIndex ist. Damit kannst Du deine Variablen dann auswählen:

// Beispiel für die Variablen:
var var1 = 2000, var2 = 3000; var3 = 4000;

                       // und der Formatter:
                       formatter: function (value, context) {
                            console.log(context.datasetIndex);
                            switch (context.datasetIndex) {
                                case 1: return var1;
                                case 2: return var2;
                                case 3: return var3;
                            }
                            return value.y;
                        }

Das ist das div mit der Klasse "nav-mobile". Es hatte schon display: inline-block; aber durch das ganze padding, width und height war es mit seinem blauen Hintergrund viel größer als das Icon.

Zitat

jetzt verstehe ich nicht wie ich meine main-nav nach rechts verschiebe (also eigentlich justify-content= flex-end oder?).

justify-content= flex-end ist schon genau richtig, der Grund, warum es nicht funktioniert, ist, dass Du bei dem betr. Element nicht display: flex; gesetzt hast, daher bleibt das justify-content wirkungslos.

Außerdem geistert da noch ein float herum, das besser löschen.

Und das div.hero ist immer noch absolut positioniert und hat eine feste Breite.

Arbeite ich das alles ein, sieht es so aus:

https://codepen.io/Sempervivum/pen/abzLaYB

IMO schon viel besser.

Zitat

2. Ist es bei Javascript üblich Variablen in einer Schleifen zu definieren?

Ja, häufig ist es sogar erforderlich, z. B. wenn man in einer Schleife HTML-Elemente anlegt:

for (let i = 0; i < 10; i++) {
    let inp = document.createElement('input');
    document.getElementById('container').appendChild(inp);
}

Weil die Variable innerhalb der Schleife definiert wird, wird bei jedem Durchlauf ein neues Input-Element erzeugt und in der Container mit der ID 'container' eingefügt.

Zitat

1. Wenn man mittels querySelector nach .nr-person sucht, findet er trotzdem die dazugehörigen Klassen, obwohl sie "nr-person adult" und "nr-person child" heißen. Sucht er sich lediglich den Wortlaut "nr-person" raus?

"nr-person child" ist nicht eine Klasse sondern man kann einem Element mehrere zuteilen, durch Leerzeichen getrennt, und auch mehrere abfragen:

document.querySelectorAll('.nr-person') würde beide Elemente liefern, Erwachsene und Kinder

document.querySelectorAll('.nr-person.child') dagegen nur das Eingabefeld für die Kinder

Zitat

Ziel soll sein, dass das Hamburger Menü auf einem kleinen, auf die Größe angepassten Quadrat mit blauer Farbe steht.

So?

html-seminar.de/woltlab/attachment/2125/

Solch eine Aufgabe tritt relativ häufig auf. Ich schlage folgende Lösung vor:

Die IDs durch Klassen ersetzen. Hat man jetzt z. B. den Plus-Button, kann man das dazugehörige Eingabefeld mit der Anzahl ermitteln, indem man das Elternelement ermittelt, in dem Fall das <td> und davon ausgehend über die Funktion querySelector mit der Klasse als Parameter das Eingabefeld.

Außerdem schlage ich vor, um mehrfachen Code zu vermeiden, Herauf- und Herunterzählen mit nur einer Funktion zu erledigen.

Ich habe davon eine Demo gemacht:

     <table>
        <tr id="zeile1">
            <form name="Formular" action="">
                <td><input type="text" id="Artikel" size="20"></td>
                <td>
                    <input type="button" class="changeNr" value="-">
                    <input type="text" class="nr-person adult" data-factor="1" size="2" disabled="" value="1" />
                    <input type="button" class="changeNr" value="+">
                </td>
                <td>
                    <input type="button" class="changeNr" value="-">
                    <input type="text" class="nr-person child" data-factor="0.35" size="2" disabled="" value="1" />
                    <input type="button" class="changeNr" value="+">
                </td>
                <td>
                    <input type="text" class="per-item" disabled="disabled" value="23.95" size="5">
                </td>
                <td>
                    <input type="text" class="total" disabled="disabled" value="23.95" size="5">
                </td>
                <td>
                    <a href="javascript:blend_out('zeile1')"><input type="button" value="X" onclick="reset1()"></a>
                </td>
            </form>
        </tr>
    </table>
    <script>
        // Alle Buttons zum Aendern der Anzahl ermitteln
        const changeBtns = document.querySelectorAll('.changeNr');
        // Fuer jeden Button einen Eventlistener registrieren
        for (let i = 0; i < changeBtns.length; i++) {
            const theBtn = changeBtns[i]; // der aktuelle Button
            theBtn.addEventListener('click', function () {
                // this ist der aktuelle Button
                let val = this.value; // der aktuelle Wert '+' oder '-'
                // Das Eingabefeld mit der Anzahl:
                // this.parentNode ist das Elternelement (das <td>)
                // let inputNr = this.parentNode.childNodes[1];
                const inputNr = this.parentNode.querySelector('.nr-person');
                let nr = inputNr.value; // die aktuelle Anzahl
                // entsprechend dem Wert '+' oder '-' die Anzahl ändern
                if (val == '+') {
                    nr++;
                } else {
                    nr--;
                }
                // den neuen Wert in das Eingabefeld eintragen
                inputNr.value = nr;
                // die Funktion summieren berechnet jetzt den Preis
                // wir uebergeben ihr das Elternelement unter dem 
                // alle Elemente versammelt sind
                summieren(this.parentNode.parentNode);
            });
        }
        function summieren(ele) {
            // Einzelpreis ermitteln
            const perItemPrice = ele.querySelector('.per-item').value;
            let totalPrice = 0;
            // die Eingabefelder mit jeweils der Anzahl der Personen ermitteln
            const nrInputs = ele.querySelectorAll('.nr-person');
            for (let i = 0; i < nrInputs.length; i++) {
                const theNrInput = nrInputs[i];
                const nr = theNrInput.value; // die aktuelle Anzahl
                const factor = theNrInput.getAttribute('data-factor'); // der aktuelle Faktor
                totalPrice += perItemPrice * nr * factor;
            }
            console.log(totalPrice);
        }
    </script>

Ich hoffe, durch die Kommentare ist es verständlich.

Der Grund ist, dass dein div.hero die Navigation überdeckt, so dass die Mausaktionen nicht an die a-Elemente gelangen. Kurzfristige Lösung: Dem div.hero ein pointer-events: none; geben, das macht es durchlässig für Mausaktionen.

Längerfristig gedacht ist es häufig so, dass absolute Positionierung und die damit verbunden Überdeckung die Ursache für Probleme sind, so wie hier. Nach Möglichkeit darauf verzichten.

Alles klar, der Grund dafür, dass "[object Object]" angezeigt wird ist, dass der Wert in deinem data-Array, der unter dem Parameter value zur Verfügung steht, ein Objekt mit x und y ist. Da für dich ja offenbar der y-Wert von Interesse ist, kannst Du diesen im Formatter verwenden:

        formatter: function(value){
            return value.y + ' (100%) ';        //der value wird leider nicht angezeigt. Es steht "[object Object]".
        }

Wenn Du statt des y-Wertes eine andere Variable anzeigen willst, ist das ohne weiteres möglich. Du musst sie nur auswählen, dafür müsste im zweiten Parameter des Formatters der context zur Verfügung stehen und darin ein Index für den Chart bzw. das Dataset. Damit kannst Du dann die Variable auswählen.

Wenn Du initial-scale=1 angibst, stellt der Browser die Seite vom Zoom her genau so dar, wie Du sie gestaltet hast. Und Du hast bei allen Elementen die Breite auf > 500px gesetzt. Ist der Viewport schmaler, taucht zwangsläufig die horizontale Scrollbar auf. Deaktiviere ich diese Breitenangaben passen sich die Elemente dagegen an die Breite des Viewports an und die horizontale Scrollbar verschwindet.

BTW: Du benutzt einen veralteten Doctype und float für die Gestaltung. Ich empfehle, auf HTML5 und Flexlayout umzustellen.

Das genannte Meta-Tag ist nur eine Sache. Das ganze Layout der Seite muss auch passen, damit sie so angezeigt wird, wie Du es dir vorstellst. Hilfreicher als Screenshots wäre es, wenn man sich die Seite online ansehen könnte. Kannst Du die URL posten?

Du schreibst

Zitat

ich habe zZt „width=device-width“

Das entscheidende für das Zoomen ist jedoch die initial-scale-Anweisung. Hast Du die auch?

Ja, das ist immer so, dass ohne weitere Maßnahmen ein mobiler Browser die Darstellung so zoomt, wie er es für richtig hält. Das kann man aber unterbinden, wie hier beschrieben:

https://wiki.selfhtml.org/wiki/HTML/Kopf…port_einstellen

Mit Hilfe von Stackoverflow und der Doku von chart.js habe ich heraus gefunden, dass sich dein Vorhaben mit mehreren charts umsetzen lässt: Ein Linechart für die gelbe Linie und drei Scattercharts für die braunen Punkte. Ich habe mal eine Demo gemacht, Werte, Farben, Stärken der Punkte etc. kannst Du sicher selbst anpassen:

<!DOCTYPE html>
<html>

<head>
    <title>chart.js Multiple graphs</title>
    <meta charset="utf-8">

</head>

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script>
    <canvas id="myChart" width="400" height="400"></canvas>
    <script>
        var ctx = document.getElementById("myChart");

        var scatterChart = new Chart(ctx, {
            type: 'line',
            data: {
                datasets: [{
                    label: 'Line Dataset',
                    fill: false,
                    data: [
                        { x: 0, y: 65 },
                        { x: 4, y: 59 },
                        { x: 100, y: 80 },
                        { x: 110, y: 81 },
                        { x: 125, y: 56 }
                    ]
                }, {
                    label: '2nd Scatter Dataset',
                    type: 'scatter',
                    data: [{ x: 60, y: 70 }
                    ]
                }, {
                    label: '3rd Scatter Dataset',
                    type: 'scatter',
                    data: [
                        { x: 60, y: 75 }
                    ]
                }, {
                    label: '4th Scatter Dataset',
                    type: 'scatter',
                    data: [
                        { x: 60, y: 80 }
                    ]
                }]
            },
            options: {
                scales: {
                    xAxes: [{
                        type: 'linear',
                        position: 'bottom'
                    }]
                }
            }
        });
    </script>
</body>

</html>