IE Problem :checked bei Attributwechsel per JS

[bobby]

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

[dedlfix]

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.

[bobby]

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

[dedlfix]

Tach!

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

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

dedlfix.

[bobby]

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

[bobby]

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

[Gunnar Bittersmann]

@@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 🖖

[bobby]

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

[pl]

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

[bobby]

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

[bobby]

Moin,

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

Gruß Bobby

[Gunnar Bittersmann]

@@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 🖖

[bobby]

Moin,

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

Gruß Bobby

[bobby]

Moin,

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

Gruß Bobby