Beim einfügen eines Bildes zerschießt sich die JavaScript Ausgabe

A

aillense86

Grünschnabel
Hallo alle zusammen,

ich habe ein kleines Auswertungstool geschrieben und bei der Ausgabe habe ich folgendes Problem, sobald ich ein Bild mit img src in meine Seite einbinden will zerschießt sich die Ausgabe voll. Es liegt sehr wahrscheinlich an meinem JS Code, mir wird folgende Fehlermeldung ausgegeben:

Uncaught TypeError: Cannot set property 'src' of undefined
at Auswerten (scrolling-nav.js:281)
at HTMLButtonElement.onclick (VM2756 index.html:822)

Könnt Ihr bitte weiterhelfen, ich komme einfach nicht mehr weiter.

Mein kleines Projekt: https://ufile.io/58la6

Viele Grüße
Andreas
 
aillense86 hat gesagt.:
Hallo alle zusammen,

ich habe ein kleines Auswertungstool geschrieben und bei der Ausgabe habe ich folgendes Problem, sobald ich ein Bild mit img src in meine Seite einbinden will zerschießt sich die Ausgabe voll
Zum Vergrößern anklicken....


Was meinst du damit ? ich habe mal ein codepen gemacht und da kann ich nicht sehen was du meinst .
Habe auch nicht die originalen Bilder genommen.
Aber es könnte auch sein das es daran liegt das die ganzen anderen Daten die dazu gehöhren nicht in Codepen berücksichtigt werden
https://codepen.io/basti1012/pen/vREbNX
 
ja pass auf im Bereich Auswertung gibt es zwei Bilder, einmal das Bild das angezeigt wird und einmal den platzhalter für den balken der nach der Auswertung angezeigt werden soll.
Wenn ich aber ein Logo einfüge dann wird immer der Balken in das erste Bild reingeladen was eig falsch ist. Ich verstehe nicht, warum das Programm das macht.

Der JsCode 276
document.images[i2].src = "images/bar1.gif"; scheint nicht korrekt zu sein, aber ich wüsste jetzt nicht wie man es anders machen kann...
 
Könntest du vieleicht eine fiddle oder Codepen fertig machen wo die bilder mit drinne sind und den Fehler sehen kann.
Ich glaube das ist einfacher .
Vieleicht finden die anderen den Fehler auch ohne fiddle aber ich suche so ewig.

Hast du schon ein Test Link? das wäre auch gut
 
Wenn du das Formular ausfüllst und auswerten klickst dann siehste das Problem...
Zum Vergrößern anklicken....
Ich nicht, bei mir kommt auch kein Fehler in der Console. (Opera)
Links sind Balken unterschiedlicher Größe und rechts davon jeweils ein unsichtbares GIF (images/bar0.gif).
 
Ich muß sagen das sieht soweit gut aus .
Hast du mal raus gefunden ob der Fehlere nur bei bestimmten Fragen ,oder bestimmten Bilder kommen.
Hast du den Fehler auch auf der Testseite,oder nur auf der Hauptseite.
Ist auf der Testseite alles mit eingebunden was im eigentlichen Projekt auch mit bei ist?
Vieleicht ist da der störenfried zu suchen
 
im Bereich Auswertung gibt es zwei Bilder, einmal das Bild das angezeigt wird und einmal den platzhalter für den balken der nach der Auswertung angezeigt werden soll.
Wenn ich aber ein Logo einfüge dann wird immer der Balken in das erste Bild reingeladen was eig falsch ist. Ich verstehe nicht, warum das Programm das macht.
Zum Vergrößern anklicken....
Ich glaube, jetzt verstehe ich es:
Das linke Bild ist das Logo und in das rechte Bild soll der Balken entspr. der Auswertung geladen werden? Aber statt dessen überschreibt der Balken das linke Bild und im rechten bleibt der unsichtbare Platzhalter?
Wenn das so ist, brauchst Du eigentlich nur den Index des Bildes um eins zu erhöhen und es sollte funktionieren.
 
So, ich habe es mal untersucht und es funktioniert, wenn Du den Index so berechnest:
Code: 
i2 = 2 * i;
Die Schleife beginnst Du mit 1; vor dem ersten zu ersetzenden Bild kommen zwei, d. h. der Index des Bildes mit dem ersten Balken ist 2.
Bedenke, dass dieses Verfahren wenig änderungsfreundlich ist: Wenn Du oben mal ein Bild einfügst, verschiebt sich alles und die Berechnung stimmt nicht mehr. Klarer wäre es, den img-Tags eine sinnvolle ID zu geben und sie darüber anzusprechen oder das vorhandene Name-Attribut zu verwenden:
Code: 
    for(i = 1; i <= 6; i++)
    {

        str_val = tol_cnt[i];


        if(str_val > 0){

            var imgsrc = "images/bar1.gif";

        }


        if(str_val >=  20 ){

            var imgsrc = "images/bar2.gif";

        }

        if(str_val >=  30){

            var imgsrc = "images/bar3.gif";

        }

        if(str_val >= 40){

            var imgsrc = "images/bar4.gif";

        }

        if(str_val >=  50){

            var imgsrc = "images/bar5.gif";

        }

        if(str_val >= 60){

            var imgsrc = "images/bar6.gif";

        }

        if(str_val >= 70){

            var imgsrc = "images/bar7.gif";

        }

        if(str_val >= 80){

            var imgsrc = "images/bar8.gif";

        }


        if(str_val >= 90){

            var imgsrc = "images/bar9.gif";

        }

        if(str_val >=  100){

            var imgsrc = "images/bar10.gif";

        }
        document.querySelector("img[name='bar" + i + "']").src = imgsrc;
    }
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück