Beiträge von Arne Drews

    Na ich hoffe mal, dass grundsätzlich das Load-Event genutzt wird?!

    Falls nicht, JavaScript im Head-Bereich immer in so was hüllen:

    Code
    document.addEventListener('DOMContentLoaded', function() {
    
        // here comes the script
    
    });

    Scripte in den Footer zu legen ist nur für bestimmte Erweiterungen/Tracker notwendig.

    Das Bild sollte für die Zielgröße in einer adäquaten Qualität vorliegen, dann kann man es kleiner anzeigen und langsam größer werden lassen.

    Mehr wie HTML5 und CSS3 wird dazu nicht benötigt.

    Aber für sowas einfaches würde ich nur Javascript nutzen.

    Und wenn bspw. Blocker im Spiel sind? Dann funktioniert evtl. nix?! Setzt Du auf PHP funktioniert es zumindest beim Aufruf der Seite schon mal richtig.

    JavaScript kannst Du dann zusätzlich einsetzen, um das live zu aktualisieren, wo nichts geblockt wird. Aber die Basis PHP macht erstmal am meisten Sinn.

    Nur mal als Anregung, da ich denke, dass es sicher später mal Ränge mehr gibt oder man die Grenzen evtl. mal anpasst.

    Um die ganzen if-Bedingungen nicht immer anpassen zu müssen, wäre es vorteilhaft, wenn Du die Rang-Fehlergrenzen in ein Array auslagern würdest, bspw.:

    PHP
    <?php
    $iSum = 4;    // Anzahl gemachter Fehler
    
    $aStages = [
        1 => 5,    // Rang 1
        2 => 10,   // Rang 2
        3 => 15    // Rang 3
    ];

    Dann würde anstelle der ganzen if-Bedingungen nur noch Konstrukt aus Array-Funktionen den Rest erledigen:

    PHP
    <?php
    $iStage = (integer)array_keys(
        array_filter(
            $aStages
            , function($val) use($iSum) {
                return $val >= $iSum;
            }
        )
    )[0];

    In $iStage hast Du dann den entsprechenden Rang.


    Das sieht jetzt auf den ersten Blick etwas komplizierter aus, aber der Vorteil besteht halt darin, dass Du die Ränge und ihre Grenzen beliebig über das Array oben steuern kannst. Eine Änderung an den Array-Funktionen ist nicht notwendig, ganz egal, wie Du die Grenzen verschiebst oder wie viele Ränge Du irgendwann mal hast. Kein Aufblähen von IF-Abfragen oder sonstiges.

    Zunächst mal muss geklärt werden, ob Stef Dich richtig verstanden hat:

    Willst Du die Uhrzeit permanent prüfen und aktiv darauf reagieren oder reicht es Dir nach einer Benutzeraktion, bspw. der Klick auf einen Menüpunkt, der die Seite komplett aktualisiert? Dazu wäre dann nämlich kein JavaScript nötig.

    Wobei ich mir grad nicht sicher war und das mal getestet habe. not() wird auch nativ unterstützt.

    Deine Selektion müsste so aussehen, dann funktioniert das:

    Code
    document.querySelectorAll( 'a:not(#hilfe)' );

    Also einfach die SingleQuotes im not() weglassen.

    Nö, ausser eine kleine Erweiterung, wie ich Dir in #6 mit bind() gezeigt habe.

    Aber ob das den Aufwand wert ist, musst Du selbst entscheiden, ich weiß nicht, wie häufig das für Dich Anwendung findet.

    In der Erweiterung kannst Du ja bspw. weitere Funktionen zusammen mit bind() und not() aufnehmen. Es ist nicht notwendig, für jede Erweiterung eine neue Klasse zu definieren.


    Wenn Du also öfter solche Loops über Elemente machst, egal aus welchem Grund oder zu welchem Ziel, kann so eine kleine Erweiterung für übersichtlicheren und insgesamt kürzeren Code sorgen.

    Man kann ja auch vieles mit relativ wenig Aufwand selber machen. Es ist natürlich nicht dazu gedacht, etwas wie jQuery selbst zu machen, aber wenn man bspw. bei einem Array automatisch loopen möchte, kann man sich das natürlich schnell basteln.


    Beispiel:

    Code
    class ArrayExt extends Array {
      
      constructor( array ) { super( array ); }
      
      bind( event, method ) {  
          this.forEach( (i) => { i.addEventListener( event, method ); });
      }
      
    }

    erfüllt zum großen Teil schon das, was Du von jQuery gewohnt bist. In Deiner Anwendung reicht dann bspw. so etwas:

    Code
    var _buttons = ArrayExt.from( document.querySelectorAll('button') );
    
    _buttons.bind( 'click', function(e) {
        e.preventDefault();
        alert( this.innerText );
      });

    Zu beachten ist, dass M$ Array.from() erst ab Edge unterstützt, in IE müsste man dafür noch was eigenes entwickeln, aber das soll ja auch nur ein Beispiel sein.

    Ist natürlich alles nur sinnvoll, wenn es häufiger Verwendung findet, ansonsten kann man auch einfach den Standard forEach() nehmen.


    Achso, vergessen, bezogen auf dieses Konstrukt bspw.:

    Code
    <button>Eins</button>
    <button>Zwei</button>
    <button>Drei</button>

    jQuery bietet Dir den "Luxus", dass er erkennt, ob es ein Array oder ein einzelnes Element ist und je nachdem bspw. .bind() oder .click() darauf anwendet.

    Bei einem Array wird dort auch intern gelooped.


    Da muss man sich dran gewöhnen, aber dann ist es nativ nicht viel umständlicher.

    querySelectorAll() liefert ein Array und du willst jedem Element des Array das Event verpassen.

    Dazu musst Du dann über die Elemente iterieren, bspw. mit forEach(). Und data-Attribute sprichst Du am besten über dataset an:

    Also wenn ich das 1:1 in codepen übernehme und einen alert in die Funktion sendUserData setze, haut es hin.

    Du solltest der Funktion den Event-Parameter mitgeben und in der Funktion als erstes ein e.preventDefault(); setzen.

    Ansonsten wird das Formular natürlich abgeschickt.

    Als EventListener erkenne ich da nur addNewUser und exportUserList.

    Dass undefined ist, siehst Du bestimmt im Developer-Tool Deines Browsers, oder?


    Dann analysiere das am besten dort. Es ist einfacher, wenn man das fertige Dokument sieht.

    Also ich habe mein Beispiel mal getestet.

    Da muss einfach nur in den Zeilen 16 und 17 das this gegen i ausgetauscht werden, mein Fehler.


    Weiterhin muss die Zeile 2 ans Ende gestellt werden, da das Ereignis in Zeile 2 noch gar nicht definiert ist.


    Mit den kleinen Änderungen funktioniert das bei mir.

    Hättest Du aber auch drauf kommen können, wenn Du das Browser-Entwicklerwerkzeug verwendest!