Beiträge von Sempervivum

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>

Denke, jetzt verstehe ich es. Ich werde es mir mal ansehen ...

Wahrscheinlich wird es schon genügen, den Fehler in Zeile 48 zu beheben:

if(input=="") { // hier ein doppeltes Gleichheitszeichen
    
            document.getElementById("listing").innerHTML = "";
            document.getElementById("listing").style.display = "none";
    
    
    }
    
}

oder besser einen else-Zweig anzulegen:

    } else {
            document.getElementById("listing").innerHTML = "";
            document.getElementById("listing").style.display = "none";
    }

Mal sehen, was ich davon bisher verstehe:

Die gelbe, gerade, horizontale Linie in dem Bild in deinem ersten Postion ist in Wirklichkeit ein Linegraph wie man ihn normaler Weise kennt und wie man ihn bei chart.js sieht.

Diesem Diagramm möchtest Du jetzt die braunen Punktwerte hinzu fügen?

Verstehe ich nicht. Dein Bild sieht ganz anders aus als das Beispiel von chart.js?

Zitat

Macht man das heute ohne """ ?

Ich war auch überrascht, dass das valide ist, aber offenbar ja. Mein VS-Code meckert das aber an und den hatte ich bisher für zuverlässig gehalten. Finde es aber selber mit Hochkommas übersichtlicher und besser lesbar.

Nein, ich würde nicht von OSM abraten, wenn es das liefert, was Du brauchst. Ich hatte selber schon daran gedacht, aber wegen des Overlays dachte ich, man braucht eine API. Das OVL soll sich ja beim Zommen und Pannen mit bewegen und dabei genau die Position auf der Karte behalten. Wie ich sehe, ist bei OSM auch eine Version mit Satellitenbildern in Arbeit.

BTW: Es muss nicht unbedingt immer Google sein. Vor einiger Zeit habe ich bei einem Projekt mitgemischt, wo wir Cesium eingesetzt haben. Das unterstützt ebenfalls HTML-Overlays:

https://webentwicklung.ulrichbangert.de/cesium-demo-2.php