Frage Random-Uhr Problem mit parseInt

colaholiker · Dienstag um 09:01

Guten Morgen,

auf eine meiner Webseiten läuft eine Uhr, deren Ziffernblatt ein zufällig geladenes Hintergrundbild ist.
Die Zeiger (Quelle) werden in verschiedenen Farben dazugeladen um immer gut sichbar zu sein.
Die Bildnummern und Themen (Zeiger-Eigenschaften) sind in einem Array hinterlegt.

Ich hatte dann irgendwann Buttons für eine Handsteuerung dazugebaut und dachte alles funktioniert, bis ich merkte daß die Zeiger nicht mehr zum Thema passen. Da Bildnr. mit Thema auf der Uhr angezeigt werden, kann ich ungefähr sagen wo der Fehler liegt:
Zum hoch- und runterrechnen der Array-Nummern habe ich 'parseInt' verwenden müssen, und das wird für die Themen nicht übernommen.

Hier der relevante Codeteil:

Code:

    anzPix = themes.length;
if( e === 'noBtn' ){   
    randomIdx = parseInt(Math.floor((Math.random() * anzPix) + 1));
    //-- randomIdx = Math.floor((Math.random() * anzPix));
    //-- randomIdx = 67;
    sessionStorage.setItem('randomIdx',randomIdx);
} else if ( e === 'up' ) {
    randomIdx = sessionStorage.getItem('randomIdx');
    if(randomIdx < 2){randomIdx = anzPix;}
    randomIdx = parseInt(randomIdx) - 1;
    sessionStorage.setItem('randomIdx',randomIdx);
} else if ( e === 'down' ) {
    randomIdx = sessionStorage.getItem('randomIdx');
    if(randomIdx > anzPix-2){randomIdx = 0;}
    randomIdx = parseInt(randomIdx) + 1;
    sessionStorage.setItem('randomIdx',randomIdx);
}
randomIdx = sessionStorage.getItem('randomIdx');
// auf das Array zugreifen:
const
    path = 'a-Arbeitsfiles/images/Uhren/',
    im = themes[randomIdx].img,
    cls = themes[randomIdx].cls,
    clkContainer = document.querySelector('div.clock');

clkContainer.classList.add(cls);
clkContainer.style.backgroundImage = `url(${path + im})`;
di1.innerHTML = randomIdx + '/' + (cls.substr(-1));

Ich hoffe diese Infos reichen.
randomIdx und parseInt(randomIdx) ist halt nicht dasselbe, aber nur mit randomIdx klappt das Zählen nicht.
Als Datei hänge ich zur Sicherheit den kompletten js-Code dran...
TIA
C.

Sempervivum · Dienstag um 14:54

Plausibel ist das irgend wie nicht, denn Math.floor liefert ja schon einen Integer. Versuch doch mal die Werte mit console.log auszugeben, ein Mal mit und ein Mal ohne parseInt. Und die resultierende URL, die Du als Hintergrundbild setzt.

colaholiker · Dienstag um 20:02

Die URL ist nicht das Problem, die wechselt korrekt.
Der Fehler betrifft die Auswahl des Themas also 'cls'.

Jetzt nochmal genau hingeschaut:
- Random-Uhr und Thema nach Start der Ws stimmt.
- oberen Button betätigt: Bild wird zu Bild-1 , Thema zB. bleibt dasselbe wie vorher, wenn das im Array so hinterlegt ist.
- weiter mit dem Button: Bild wie gehabt, Thema ändert sich dann, wenn im Array- Verlauf auch das Thema wechselt (das wär noch ok),
- wechselt das Thema erneut im Array, wird das nicht mehr übernommen.

Die eingesetzten Log- Zeilen:

Javascript:

randomIdx = sessionStorage.getItem('randomIdx');

console.log('randomIdx           = ' + randomIdx);
console.log('parseInt(randomIdx) = ' + parseInt(randomIdx));

// auf das Array zugreifen:
const
    path = 'a-Arbeitsfiles/images/Uhren/',
    im = themes[randomIdx].img,
    cls = themes[randomIdx].cls,
    clkContainer = document.querySelector('div.clock');
    
console.log('url                 = ' + path + im);

und das Ergebnis (nur Button 'up') zeigt nichts Besonderes:
(Ausschnitt)

Code:

randomIdx           = 77
parseInt(randomIdx) = 77
url                 = a-Arbeitsfiles/images/Uhren/uhr-77.jpg
randomIdx           = 76
parseInt(randomIdx) = 76
url                 = a-Arbeitsfiles/images/Uhren/uhr-76.jpg
randomIdx           = 75
parseInt(randomIdx) = 75
url                 = a-Arbeitsfiles/images/Uhren/uhr-75.jpg
randomIdx           = 74
parseInt(randomIdx) = 74
url                 = a-Arbeitsfiles/images/Uhren/uhr-74.jpg

Ich hab, wie Du siehst, 'randomIdx' abgespeichert und hole es nach den 'if'- Abfragen wieder heraus. Evtl. wird die Variable deshalb zu Text?
Das teste ich als Nächstes.
Trifft das zu, solte nur in 'cls = themes[randomIdx].cls,' das Parsen nötig sein.

Wegen dem Speichern: das ist eine Vorbereitung darauf, daß sich die Uhr nicht nach jedem Wechsel zu Unterseiten ändert. Kommt evtl. mal...

Sempervivum · Dienstag um 20:08

Evtl. wird die Variable deshalb zu Text?

Das trifft zu, was Du im Localstorage speicherst, ist Text.

colaholiker · Dienstag um 20:32

Naja, ich hab gemerkt daß der Speicher auch zum Schalten des Bilds wichtig ist.

Jetzt hab ich alles wieder wie in #1 gezeigt zurückgebaut, und statt der URL die Variable 'cls' angezeigt:

Code:

randomIdx           = 73
parseInt(randomIdx) = 73
cls                 = theme1
randomIdx           = 72
parseInt(randomIdx) = 72
cls                 = theme1
randomIdx           = 71
parseInt(randomIdx) = 71
cls                 = theme1
randomIdx           = 70
parseInt(randomIdx) = 70
cls                 = theme1
randomIdx           = 69
parseInt(randomIdx) = 69
cls                 = theme3
randomIdx           = 68
parseInt(randomIdx) = 68
cls                 = theme4
randomIdx           = 67
parseInt(randomIdx) = 67
cls                 = theme4

in 'cls' wird also das Thema richtig übernommen (habs mit dem Array verglichen).
Und weil 'cls' Text ist, braucht dort nicht geparst zu werden.

Das Thema ändert sich von 'Thema1' zu 'Thema3". 'Thema4' wird ignoriert und alle Weiteren, auch in die andere Richtung zrück, also zu Thema 3,1...
Das verstehe ich nicht. Vor allem, weil 'cls' ja wechselt.

Das Parsen hatte ich (letzten Sommer) evtl. wegen der Speichernutzung einführen müssen, damit gezählt werden kann.

Sempervivum · Dienstag um 20:40

Mir scheint, das müsste man komplett im Zusammenhang sehen und untersuchen, einschl. des HTML und des Theme-Managements. Ich glaube, Du hast es nicht online. Ist es möglich, eine Demo zu machen?

colaholiker · Dienstag um 20:48

Mir fällt gerade was auf, das kann der Knackpunkt sein:

Normal war ja, daß die Randomzahl einmalig Uhr und Thema aufruft.

Jetzt ändere ich den Arrayplatz mit den Buttons, und es passiert dasselbe:
Das Thema ändert sich einmal!

Sempervivum, kannst Du damit was anfangen?
Ich hab mal alles zusammengefaßt, weil es ja evtl. Richtung css oder HTML geht.
Ähm, ja die Pfade... sind im HTML-Dokument :-/

...ups Überschnitten. bittesehr ;-)

nochmal PS:
- Uhrbilder fehlen, kannst Du Dummybilder nehmen? Das würde die Datei ziemlich vergrößern und das "Uhr"-heberrecht, naja.
- Img- Nummer und Thema werden übrigens, passend zum Bild, an verschiedenen Positionen mit angezeigt.

colaholiker · Dienstag um 21:10

noch vergessen... und 2 Uhren

Sempervivum · Dienstag um 21:12

Was mir auffällt: Im Container der Uhr sind alle vier Klassen für die Themen gesetzt.
Ich untersuche das weiter ...

Sempervivum · Dienstag um 21:19

... möglicher Weise ist dies die Problemursache:
Mit dieser Anweisung:

Code:

clkContainer.classList.add(cls);

fügst Du die Klasse jeweils hinzu ohne die alte zu löschen. Irgend wann sind dann alle Klassen gesetzt.

colaholiker · Dienstag um 21:36

so etwa?

Code:

// auf das Array zugreifen:
const
    path = 'a-Arbeitsfiles/images/Uhren/',
    im = themes[randomIdx].img,
    cls_old = themes[randomIdx_old].cls,
    cls = themes[randomIdx].cls,
    clkContainer = document.querySelector('div.clock');
    
console.log('cls                 = ' + cls);

if (cls != cls_old) {
    clkContainer.classList.remove(cls);   
}

clkContainer.classList.add(cls);

randomIdx_old wird in der ersten if-Abfrage gespeichert, wo die random-Formel greift.

'const' geht dann wohl auch nicht mehr...
Teste ich gleich.

Sempervivum · Dienstag um 21:37

Sieht gut aus.

colaholiker · Dienstag um 21:53

nö. mein Test sagt: randomIdx ist falsch.

Um das letzte Thema zu löschen muß dieses bekannt sein.

Code:

if (randomIdx_old != randomIdx_old) {
    clkContainer.classList.remove(cls);   
}
clkContainer.classList.add(cls);

Ist das überhaupt notwendig oder kann man die Klasse jedesmal löschen egal wie das Thema heißt?

Code:

clkContainer.classList.remove(cls);   
clkContainer.classList.add(cls);

Na ich kann ja gleich mal gucken.

colaholiker · Dienstag um 21:57

.... geht nicht. Man braucht das bisherige Thema. Da hab ich aber mit der Syntax probleme, der Code sucht ein anderes Array.

Code:

cls_old = themes[randomIdx_old].cls,
cls = themes[randomIdx].cls,

Sempervivum · Dienstag um 22:00

Du könntest auf das gute alte className zurück greifen:

Element: className property - Web APIs | MDN

The className property of the Element interface gets and sets the value of the class attribute of the specified element.

developer.mozilla.org

Dabei werden alle vorhandenen Klassen gelöscht. Du musst dann aber daran denken, die Klasse "clock" wieder hinzu zu fügen:

Code:

clkContainer.classList = 'clock';

Und dann die Klasse für das Thema hinzu fügen.

Sempervivum · Dienstag um 22:15

Oder so, dann bleiben alle anderen Klassen erhalten:

Code:

clkContainer.className = clkContainer.className.replace(/theme[1-9]/, cls);

colaholiker · Dienstag um 22:17

Inzwischen hatte ich zwar meinen Code am laufen, aber die Themen waren immer noch hängengeblieben.

Sempervivum schrieb:
dann bleiben alle anderen Klassen erhalten

Das ist besser so. Ich probiers mal.

colaholiker · Dienstag um 22:21

Dann haben wir das:

Der sichtbare Button funktioniert, abe es gibt keine Zeiger.
Die Codezeile ist an dieser Stelle:

Code:

console.log('cls                 = ' + cls);
console.log('cls_old             = ' + cls_old);
/*
if (cls != cls_old) {
    clkContainer.classList.remove(cls_old);   
}
clkContainer.classList.add(cls);
*/
clkContainer.className = clkContainer.className.replace(/theme[1-9]/, cls);

clkContainer.style.backgroundImage = `url(${path + im})`;
di1.innerHTML = randomIdx + '/' + (cls.substr(-1));
parseInt(randomIdx)
}

Sempervivum · Dienstag um 22:41

Das funktioniert nur wenn schon eine Klasse für das Thema vorhanden ist. Wenn ich sie im HTML hinzu füge, ist alles OK.

Sempervivum · Dienstag um 22:57

... oder so:

Code:

clkContainer.className = clkContainer.className.replace(/theme[1-9]/, '') + cls;

Frage Random-Uhr Problem mit parseInt

Mitglied

Anhänge

Senior HTML'ler

Mitglied

Senior HTML'ler

Mitglied

Senior HTML'ler

Mitglied

Anhänge

Mitglied

Anhänge

Senior HTML'ler

Senior HTML'ler

Mitglied

Senior HTML'ler

Mitglied

Mitglied

Senior HTML'ler

Senior HTML'ler

Mitglied

Mitglied

Senior HTML'ler

Senior HTML'ler