Fehler in for Schleife

[db1]

Hallo,
Ich versuche in eine For Schleife Elemente auszublenden was auch funktioniert,
jedoch gibt es den Fehler das:
null is not an object (evaluating 'x.style') obwohl das x vorhanden ist.


for (let i = 0; i < len; i++) {

var weg = "weg_" + i;
var weg = Math.round(Math.random() * (max - min)) + min;


setTimeout(() => {

let x = document.getElementById("img_teil" + i)


x.style.transition = "2s"
x.style.timing = "ease-in-out";
x.style.opacity = "0"
visibility_check = "0";


}, weg);

wenn ich:
x.style.transition = "2s" raus nehme ist der Fehler weg
das opacity = 0 funktioniert auch aber ohne den ease-in-out Effekt.
warum hat x.style.transition = "2s"; null is not an object (evaluating 'x.style') ??


wo hab ich da den Fehler ?

lg
Guenther


//end for
}

 

[M.L.]

Das ist wohl JavaScript-Code (und (lt. KI) auch verbesserungswürdig)

 

[grrr]

var weg = "weg_" + i;
var weg = Math.round(Math.random() * (max - min)) + min;

Doppeldeklaration von weg und du willst doch nur einen timestamp haben, aber keinen string

 

[KonradN]

Der Code ist so schwer lesbar. Das wäre mit sinnvoller Formatierung vermutlich einfacher. Dazu bitte Code auch wirklich als Code posten. Dazu dient der Knopf </> links oberhalb des Eingabebereiches. Dann kommt ein Popup, bei dem Du die Sprache (JavaScript) auswählen und den Code dann posten kannst.

Dann wäre es evtl. sinnvoll, konsequent ; nach Anweisungen zu setzen, denn ich vermute, dass Du keinerlei Tools zur Absicherung einsetzt. Da ist es durchaus sinnvoller, diese altmodisch beizubehalten. Aber das ist nur eine reine Empfehlung.

du willst doch nur einen timestamp haben, aber keinen string

Er will eine Zahl haben - da kommt kein timestamp sondern der timeout in ms. Und das hat er durch die zweite Deklaration, die die erste verdeckt.

Aber zu dem eigentlichen Problem
Ich vermute, dass es Zufall war, dass die Herausnahme dieser einen Zeile dazu führte, dass es plötzlich ging.
getElementbyId hat null geliefert und jede der Zugriffe wäre fehlgeschlagen, so da ein Element nicht gefunden würde.

Generell hast Du ja einen Timeout. Probleme können also sein, dass Deine Grenzen entweder von Anfang an falsch sind unter gewissen umständen oder Du hast das Problem, dass in der Zeit des Timeouts der DOM Tree noch geändert wird.

Aber über die exakte Ursache zu spekulieren bringt hier auch nichts. Die wichtige Lösung ist einfach:

if (!x) return;
Wenn getElementById das Element nicht findet, dann solltest Du diesen Fall berücksichtigen. In diesem Fall ist dann halt nichts zu deaktivieren.

 

[grrr]

Er will eine Zahl haben - da kommt kein timestamp

Für mich sind delays und periods in Form von "Zahlen" auch timestamps.

 

[KonradN]

Für mich sind delays und periods in Form von "Zahlen" auch timestamps.

Ich sehe hier durchaus Probleme bei der Wortwahl und daraus resultierende Missverständnisse.

Eine "timestamp" gibt einen klaren Zeitpunkt an. Das ist in der Regel etwas wie: Anzahl Millisekunden seit 1.1.1970 UTC.
Das ist auch eine Zahl und das macht es dann gefährlich.

Denn die Methode verlangt ja eine "duration". Also eine Zeitspanne. Wenn Du mir nun sagst: Ich soll eine Methode mit einer Timestamp aufrufen, dann mache ich das: Ich hole mir date.now() und addiere die 2000 ms, die er warten soll, um die timestamp zu erhalten, an der etas stattfinden soll ... Und statt in 2 Sekunden kommt dann das Event in 56 Jahren

Bei einer Wortwahl ist es also immer sehr wichtig, auf möglichst korrekte Begriffe zurück zu greifen und genau zu unterscheiden. Umgangssprachliche Ungenauigkeiten können in einer konkreten Domain sehr fatale Folgen haben...

 

[Oneixee5]

Noch mal zu dem Code (auch wenn es schon Kritik gab):

Variablendeklaration mit var endet in "hoisting" - Hoisting bedeutet hier: Die Deklaration (var weg wird an den Anfang der Funktion (oder des Scripts) “hochgezogen”, nicht an den Anfang der for-Schleife. Es gibt also effektiv keine "Doppeldeklaration".

Im konkreten Fall wird:
var weg = "weg_" + i;
in der nächsten Zeile sofort überschrieben. Die Zeile ist einfach nutzlos aber kein Fehler - nur Quatsch.

Die Zeile:
var weg = Math.round(Math.random() * (max - min)) + min;
muss aber nicht in der Schleife sein. Die Variablen min und max kommen von außerhalb der Schleife. Die Zeile braucht also nur einmal vor der Schleife aufgerufen werden.

Fazit: var sollte nicht mehr verwendet werden, da oft schwer ersichtlich ist, was hier wirklich passiert. Im konkreten Fall sollte vor der Schleife folgende Zeile stehen:
const weg = Math.round(Math.random() * (max - min)) + min;

Im Callback kann x auch undefined sein - wurde schon gesagt. das führt natürlich zu einem Fehler in der Console. Das kann zu Seiteneffekten führen, wenn es bspw. globale Errorhandler gibt. Hier sollte eine Prüfung eingebaut werden.

CSS-Property-Name: x.style.timing gibt es nicht; korrekt ist x.style.transitionTimingFunction = "ease-in-out" (sonst passiert da einfach nichts, ohne Fehlermeldung).

; sind in JS nicht unbedingt üblich. Wer das möchte kann sich einen Linter installieren, der die ; ergänzt. Man sollte das aber konsistent gleich verwenden, sonst wirkt das komisch und erschwert die Lesbarkeit.

for (let i = 0; i < len; i++) {

    var weg = "weg_" + i;
    var weg = Math.round(Math.random() * (max - min)) + min;


    setTimeout(() => {

        let x = document.getElementById("img_teil" + i)


        x.style.transition = "2s"
        x.style.timing = "ease-in-out";
        x.style.opacity = "0"
        visibility_check = "0";


    }, weg);
}

Korrektur (mögliche Probleme lassen sich leicht finden, keine Fehler für Zufallswert oder negativem Timeout):

// ...existierender code...

// min/max kommen von außen; hier defensiv normalisieren
let safeMin = Number(min)
let safeMax = Number(max)

if (!Number.isFinite(safeMin)) safeMin = 0
if (!Number.isFinite(safeMax)) safeMax = safeMin
if (safeMax < safeMin) [safeMin, safeMax] = [safeMax, safeMin]

const range = safeMax - safeMin
// delay ist hier niemals negativ
const delay = Math.max(0, Math.round(Math.random() * range) + safeMin)


for (let i = 0; i < len; i++) {

    setTimeout(() => {
        try {
            const elementId = "img_teil" + i
            const x = document.getElementById(elementId)

            if (!x) {
                console.warn("Element nicht gefunden:", elementId)
                return
            }

            x.style.transition = "opacity 2s ease-in-out"
            // oder      
            x.style.transitionProperty = "opacity"
            x.style.transitionDuration = "2s"
            x.style.transitionTimingFunction = "ease-in-out"
            // nicht beides!
            x.style.opacity = "0"
            visibility_check = "0" // sieht total komisch aus, wird async gesetzt, ein Auswertung ist nicht sinnvoll möglich
        } catch (err) {
            console.error("setTimeout callback failed:", err)
        }
    }, delay)
}

// ...existierender code...

 

[grrr]

Ich sehe hier durchaus Probleme bei der Wortwahl und daraus resultierende Missverständnisse.

Eine "timestamp" gibt einen klaren Zeitpunkt an. Das ist in der Regel etwas wie: Anzahl Millisekunden seit 1.1.1970 UTC.
Das ist auch eine Zahl und das macht es dann gefährlich.

Du hattest doch gesagt, setTimeout erwartet "eine Zahl", und das ist zu schwammig.

Es wird ein "delay" in Millisekunden erwartet: https://developer.mozilla.org/de/docs/Web/API/Window/setTimeout und dieses Delay bezieht sich nicht auf die aktuelle Zeit, ja.