bobby: IE Problem :checked bei Attributwechsel per JS

Moin,

Der Titel klingt sperrig. ich hab folgendes Problem. Ich möchte eine Art Karusell erstellen das automatisch wechselt.

Dazu folgende Struktur

<div id="karusell">
  <input type="radio" name="img1" checked = "checked"><div><img .... > </div>
  <input type="radio" name="img2"><div><img .... > </div>
  <input type="radio" name="img3"><div><img .... > </div>
</div>

usw.

Ich lasse nun übe rein Intervall folgende Operationen ausführen:

  1. ich wähle das nächste Input-Element
  2. alle Elemente durchgehen und entferne das Attribut "checked"
  3. ich setze das Attribut auf checked beim nächsten Element
var nextElement = document.querySelector('#karusell input:checked ~ input')
var allpictures = Array.from(document.querySelectorAll('#karusell input'));
allpictures.forEach(function(pic) {
    pic.removeAttribute('checked');
});
nextElement.setAttribute('checked','checked');

Alle Browser verstehen das, nur der IE 11 nicht (evtl. auch der IE 10). Der IE findet einfach das "neu gecheckte" Element nicht. Ich habe das gegen geprüft. Indem ich das Element ausgegeben habe (per for Iteration) und dabei das Attribut gecheckt habe. Das Element ist mit entsprechenden Attribut vorhanden. Wenn ich dieses aber wie oben beschrieben versuche zu selektieren, findet es der IE nicht. Ich hoffe das war soweit verständlich. Wo könnte mein Fehler liegen?

PS: ich will Vanilla JS verwenden und der IE 11 soll schon unterstützt werden

Gruß Bobby

--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
  1. Tach!

    Alle Browser verstehen das, nur der IE 11 nicht (evtl. auch der IE 10). Der IE findet einfach das "neu gecheckte" Element nicht. Ich habe das gegen geprüft.

    Auch der IE hat Entwicklertools mit einer Konsole drin, in der man Fehlermeldungen finden kann, beispielsweise Object doesn't support property or method 'from'.

    dedlfix.

    1. Moin,

      Das hab ich bereits gechecked. Die Konsole wirft keine Fehler.

      Ich habs auch mit verschiedenen Iterationen versucht. Immer mit dem gleichen Ergebnis.

      Wenn ich das neu gecheckte Element suche dann findet dies der IE über querySelector einfach nicht, obwohl laut Konsole das Element das Attribut checked hat.

      Als ob der DOM-Baum nicht ordentlich aktualisiert wurde.

      Gruß Bobby

      --
      -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
      1. Tach!

        Das hab ich bereits gechecked. Die Konsole wirft keine Fehler.

        Auch nicht beim Array.from(), das der IE nicht kennt?

        dedlfix.

        1. Moin,

          Hm... hast recht... mdn sagt der könnte das nicht, hat aber keinen Fehler geworfen. Das teste ich nochmal. Nichtsdestrotz, ist es egal wie ich iteriere. Das Element lässt sich nicht selektieren trotz vorhandenem Attribut.

          Gruß Bobby

          --
          -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
        2. Moin,

          Hier schein tatsächlich irgendein Update zu greifen. der IE 11 in der mir vorliegenden Version kennt tatsächlich Array.from(). Es wirft mir keine Fehler und die Funktionalität ist auch beim IE wie gewünscht.

          Ich habe dies nun dennoch umgestellt, da ich mit einenm Index arbeite. Da genügt eine simple for-Schleife

          Gruß Bobby

          --
          -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
    2. @@dedlfix

      Auch der IE hat Entwicklertools mit einer Konsole drin, in der man Fehlermeldungen finden kann

      Die Fehlermeldung „Radiobuttons sind die falschen UI-Elemente für ein Karussell“ wird man dort wohl kaum finden.

      Wie man ein Karussell richtig baut, beschreibt Heydon Pickering in seinen Inclusive Components: A Content Slider

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      1. Moin,

        Danke. Werd ich mir zu gemüte führen. Trotzdemnbleibt die Frage warum ich das Element mit dem dynamisch gesetzten Attribut nicht selektieren kann.

        Gruß Bobby

        --
        -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
  2. Hi,

    in der Aufgabenstellung erkenne ich das Prinzip des Schieberegisters. Wobei checked ein Attribut ist, was von einem Element zum Nächsten wandert. Anstatt nun bei jedem Zustandsübergang zu suchen welches Element den Status checked hat, könnte man ja auch das Register (einen integer) selbst befragen. So würde ich das machen.

    MFG

    1. Moin,

      Das :checked benätige ich eh fürs CSS. Das Element wird aber auch da nicht erkannt. Darüber ist mir das Problem aufgefallen...

      Gruß Bobby

      --
      -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
    2. Moin,

      Danke. Mit Elemente zählen und einen Index setzen hat es nun funktioniert, in Verbindung mit Gunnar seiner Antwort.

      Gruß Bobby

      --
      -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
  3. @@bobby

    <div id="karusell">
      <input type="radio" name="img1" checked = "checked"><div><img .... > </div>
      <input type="radio" name="img2"><div><img .... > </div>
      <input type="radio" name="img3"><div><img .... > </div>
    </div>
    

    Fehler (vom schon genannten Fehler abgesehen):

    • Die Radiobuttons haben verschiedene Werte fürs name-Attribut, sind also nicht gruppiert. Alle Radiobuttons einer Gruppe müssen denselben Wert fürs name-Attribut haben.
    • Die Radiobuttons haben keine Beschriftung (label).
    allpictures.forEach(function(pic) {
        pic.removeAttribute('checked');
    });
    

    Unnötig, da nur maximal ein Radiobutton einer Gruppe angewählt ist.

    nextElement.setAttribute('checked','checked');
    

    Das Anwählen eines Radionbuttons geht mit HTMLInputElement.checked = true (wobei HTMLInputElement die Referenz auf den jeweiligen Radiobutton ist).

    LLAP 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. Moin,

      Danke. Auch das versuche ich mal (rein Interesse halber)

      Gruß Bobby

      --
      -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
    2. Moin,

      Danke, das hat funktioniert. Selbtsverständlich führe ich mir deinen verlinktzen Artikel nochmal zu Gemüte.

      Gruß Bobby

      --
      -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)