Beiträge von Sempervivum

Er kann jQuery und jCanvas nicht laden.

Wie man jQuery einbindet, kannst du hier nachlesen:

https://www.html-seminar.de/jquery-tutorial.htm

jCanvas kannst Du hier herunter laden:

https://projects.calebevans.me/jcanvas/

Zitat

Was und wie muss ich dieses jQuery runterladen und einbinden ?

und dann JCanvas runterladen?

Für den Anfang brauchst Du es nicht herunterzuladen, sondern Du kannst beide von einem CDN einbinden:

    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jcanvas/20.1.2/jcanvas.js"></script>

Inzwischen habe ich es geändert, so dass es mehr auf deine Anwendung passt:

https://jsfiddle.net/Sempervivum/1somodv3/1/

Mit createCircleDisplay() wird die Anzeige aufgebaut, dies brauchst Du nur einmal beim Laden der Seite aufzurufen.

Mit updateCircleDisplay() wird der angezeigte Wert geändert.

Das Eingabefeld ist nur zur Demonstration, das kannst Du später weg lassen.

Deine Auswahl der Schwierigkeit ist doch das beste Beispiel. Es kann nur einen Level geben und was Du mühevoll bei den Checkbuttons mit Javascript programmiert hast, macht eine Gruppe von Radiobuttons von allein. Wenn eine Mehrfachauswahl gefragt ist, kann man Checkbuttons verwenden.

Ich habe vor einiger Zeit mal etwas ähnliches mit jCanvas gemacht. Einen Circle-Countdown, aber das kann man leicht umstellen, um Daten anzuzeigen.

https://jsfiddle.net/Sempervivum/o4qbLzow/

Das data-Attribut legt fest, zu welchen Tag das Bild gehört, also bei data-day="14" würde das Bild zum 14. Dezember gehören. Wenn ich diese Zahl jetzt dem ersten Bild zuordne, passt es doch nicht, denn das Bild "/Adventskalender/img/fst_px/px01_1.gif" gehört doch zum 1. Dezember oder nicht? Oder ist das egal? Ich weiß ja nicht, wie die Bilder aussehen.

Danke, so etwas liest man gern!

Zitat

Also sagt man dann damit, dass das Erwartete eine Zahl die 5 Nummern lang sein muss ist. ^ und $ vor und hinter den vorgaben sagen dann aus, dass nach den 5 Nummern schluss ist.

Genau. Oder anders gesagt, die Regex passt, wenn zwischen Anfang und Ende genau fünf Ziffern stehen.

Zitat

Der Lösungsweg mit dem .match("muster") ist doch nicht so gut.

Das möchte ich entschieden bezweifeln. Das Problem ist, dass die Regex passt, wenn irgendwo fünf Ziffern hintereinander stehen. Das ist dann auch der Fall, wenn die Eingabe sechs, sieben oder hundert Ziffern enthält.

Die Regex kann man sehr leicht anpassen, so dass nicht weniger und nicht mehr als fünf Zeichen vorhanden sein dürfen:

if (plzval.match(/^[0-9]{5}$/))

Funktioniert bei mir, probiere es aus.

Zitat

match(/[0-9]{5}/) -> die / sagen aus das es beginnt und es beendet. In den [] stehen dann die zugelassenen Zahlen und in der {} Klammer steht dann die Länge der zugelassenen Zahl. Stimmt das so ?

Korrekt. Zu Regex findet man sehr viel im Netz, auch Online-Tester als Hilfe beim Entwickeln.

Zwei Probleme:

1. In Zeile 24 bist Du schon im else-Zweig der Abfrage if(plz.length === 5), d. h. die Länge ist in jedem Fall ungleich 5 und Du kommst nie in den else-Zweig in Zeile 32 hinein.

2. Die Variable "plz" ist doppelt belegt, einmal mit dem DOM-Element und dann mit dessen Value. Besser dem Value einen anderen Namen geben, z. b. "plzval".

So funktioniert es:

        window.onload = function () {
            var plz = document.getElementById("postleitzahl");
            plz.addEventListener("keyup", getJson);
            function getJson() {
                var plzval = document.getElementById("postleitzahl").value;
                if (plzval.match(/[0-9]{5}/)) {
                    plz.classList.remove("fielderror");
                    var client = new XMLHttpRequest();
                    client.open("GET", "http://api.zippopotam.us/de/" + plzval, true);

                    client.onreadystatechange = function () {
                        if (client.readyState == 4) {
                            var jsonData = client.responseText;
                            //JSON:  {"post code": "69115", "country": "Germany", "country abbreviation": "DE", "places": [{"place name": "Heidelberg", "longitude": "8.6868", "state": "Baden-W\u00fcrttemberg", "state abbreviation": "BW", "latitude": "49.4062"}]}

                            var data = JSON.parse(jsonData); // object object
                            var data = data['places'][0]['place name'];

                            document.getElementById("wohnort").value = data;
                        }
                    }
                    client.send();
                } else {
                    plz.classList.add("fielderror");
                }
            }
        }

Ich habe, statt nur die Länge abzufragen, mit einer Regex zusätzlich geprüft, ob die Eingabe auch nummerisch ist.

Zitat

Change greift dann erst, wenn was verändert wurde ?

Change triggert dann, wenn die Eingabe mit Enter bestätigt wurde. Keyup oder Input haben jedoch den Vorteil, dass man den Wert während der Eingabe überprüfen kann, so wie es jetzt der Fall ist.

Häufiger Fehler:

plz.addEventListener("keyup", getJson());

Was passiert: Da der Funktionsname getJson von einem Klammernpaar gefolgt wird, wird die Funktion sofort ausgeführt und ihr Rückgabewert zugewiesen. Das Klammernpaar muss man weg lassen, dann wird eine Referenz der Funktion zugewiesen:

plz.addEventListener("keyup", getJson);

Außerdem ist es ungünstig, hier das keyup-Event zu verwenden, da dieses ja bei jedem Tastendruck feuert, so dass die Auswertung fehl schlägt, wenn noch keine fünf Zeichen eingegeben wurden. Besser "change" verwenden oder prüfen, ob schon fünf Ziffern eingegeben wurden.

Ups, da haben sich unsere Postings überschnitten.

data.places[0].[place name];

Da sind zwei Syntaxfehler:

1. Der Punkt ist zuviel.
2. Da place name keine Variable ist, sondern ein String und weil es ein Leerzeichen enthält, muss es in Hochkommas eingeschlossen werden.

So funktioniert es:

var wohnort = data.places[0]["place name"];

1. Möglichkeit, ein Element in einem Objekt anzusprechen:

data.country

2. Möglichkeit:

data["country"]

diese Möglichkeit funktioniert auch, wenn der Schlüssel in einer Variablen steht:

var key = "country";
var country = data[key];

Mit der 1. Möglichkeit funktioniert dies nicht.

Nächster Schritt: Nur eine Funktion verwenden:

HTML:

<br>Leicht:
  <input type="radio" name="rblevel" id="leicht1" data-speedq="1000"> Mittel:
  <input type="radio" name="rblevel" id="leicht2" data-speedq="500"> Schwer:
  <input type="radio" name="rblevel" id="leicht3" data-speedq="250"> Super schwer:
  <input type="radio" name="rblevel" id="leicht4" data-speedq="100">

JS:

function setSpeed() {
    var speedq = this.getAttribute("data-speedq");
    sessionStorage.setItem('speedq', speedq);
}
leicht1.onchange = setSpeed;
leicht2.onchange = setSpeed;
leicht3.onchange = setSpeed;
leicht4.onchange = setSpeed;

Zitat

wie man das ganze Script vieleicht auch mit wenniger code hinbekommen tut

Dieses hier kannst Du einsparen, wenn Du statt Checkbuttons Radiobuttons verwendest:

    document.getElementsByName('leicht1')[0].checked =true;
    document.getElementsByName('leicht2')[0].checked =false;
    document.getElementsByName('leicht3')[0].checked =false;
    document.getElementsByName('leicht4')[0].checked =false;

Hier kannst du eine Demo sehen:

http://ulrichbangert.de/div/webentwick…ectors-box.html

Dort siehst Du auch, dass es kein Problem ist, einen formatfüllenden Verlauf mit einer Hintergrundgrafik zu erzeugen.

Kein Problem, die Tage zufällig verteilt anzulegen. Aber müsste man dann nicht auch die Bilder anders verteilen?

"/Adventskalender/img/fst_px/px01_01.gif" ist doch explizit für den 1. Dezember, usw., nicht wahr?

Nein, Du brauchst nur nur eine einheitliche CSS-Datei für alle Seiten. Das Bild wird ja im HTML eingebunden, wie ich oben geschrieben habe:

Zitat

Das wird wesentlich einfacher, wenn Du keine Hintergrundgrafik verwendest, sondern einfach ein img-Tag:

Code

1. <div id="banner_right"><img src="banner_right_contact.jpg"></div>

so auf contact.html und entspr. auf impressum.hml:

Code

1. <div id="banner_right"><img src="banner_right_impressum.jpg"></div>

usw.

Also mir erschließt sich ja nicht wirklich, was es bringen soll, so etwas einfaches mit :before bzw. : after zu machen. Erschwert unnötig das Verständnis und die Lesbarkeit. Probiere lieber den Weg, den ich beschrieben habe, so ist es wesentlich einfacher.

Mit CSS kann man nur Elemente ansprechen, aber keine einzelnen Zeichen in einem input-Feld. Mit Javascript ist es jedoch ziemlich einfach:

    <input id="input1" />
    <script>
        input1.addEventListener("keyup", function () {
            this.value = this.value.replace(/ /g, '')
                .replace(/[A-Z0-9]{4}/g, function (match) {
                    return match + ' ';
                });
        });
    </script>