SVG Grundelemente mit JS ändern mit Hilfe eines ID Array

Marcus2010 · 31. Januar 2021

Flogender Code Funktioniert bereits. Satus kann sich ändern (bzw. hier im Code zum probieren statisch mit 0 und 1 )

<svg>

.....

....
</svg>

onofflight("0","Test1");

onofflight("1","Test2");

onofflight("0","Test3");

</script>

mit

function onofflight(Status,Name)

{

if (Status =='0')

{

document.getElementById(Name).setAttribute("fill", "white");

}

if (Status =='1')

{

document.getElementById(Name).setAttribute("fill", "yellow");

}

soll nun folgender Code werden (Leider geht der nicht, bzw. ist noch irgendwo ein kleiner Fehler drin, womöglich nur ein Syntaxfehler (Beispiel mit belibig zwei gleich langen Arrays)
<script>

onofflight("[0,1,0]","[Test1,Test2,Test3]");

</script>

mit der Funktion

function onofflight(Status,Name)

{

for(var i=0; i<3; i++)

{

if (Status[i] =='0')

{

document.getElementById(Name[i]).setAttribute("fill", "white");

}

if (Status[i] =='1')

{

document.getElementById(Name[i]).setAttribute("fill", "yellow");

}

basti1012 · 31. Januar 2021

Das bist du doch auch, oder?

https://www.html-forum.de/threads/10159/

Marcus2010 · 31. Januar 2021

Ja ist der gleiche Beitrag bzw. dachte bei je einen Beitrag in 2 Foren erreich ich mehr und/oder bekomm schneller eine Antwort.

Sempervivum · 31. Januar 2021

Der Fehler liegt hier:

Code

onofflight("[0,1,0]","[Test1,Test2,Test3]");

Du übergibst jeweils einen String statt eines Arrays von Strings. So wäre es richtig:

Code

onofflight(['0','1','0'],['Test1','Test2','Test3']);

Marcus2010 · 31. Januar 2021

Ok Danke, geht nun. Noch eine kleine Änderung, wäre das mit ID und Klassen gemischt möglich ( bei einem Element mit ID und bei mehreren Elementen dann als Klasse ? oder muss ich dan alles auf Klassen ausrichten (selbst die einzelnen Elemente) ?

Bsp

<svg>

.....

....

</svg>

mit

function onofflight(Status,Name)

{

for(var i=0; i<3; i++)

{

if (Status[i] =='0')

{

document.getElementById(Name[i]).setAttribute("fill", "white");

document.getElementByClassName(Name[i]).setAttribute("fill", "white");

....

}

oder

<svg>

.....

....

</svg>

mit

function onofflight(Status,Name)

{

for(var i=0; i<3; i++)

{

if (Status[i] =='0')

{

document.getElementByClassName(Name[i]).setAttribute("fill", "white");

....

}

Übergabe in beiden Fällen dann so

onofflight(['0','1','0'],['Test1','Test2','Test3']);

m.scatello · 31. Januar 2021

Zitat von Marcus2010

Ja ist der gleiche Beitrag bzw. dachte bei je einen Beitrag in 2 Foren erreich ich mehr und/oder bekomm schneller eine Antwort.

Crossposting bedeutet, dass ein und dieselbe Frage in mehreren Foren oder Newsgroups gleichzeitig gestellt wird. Ein solches Verhalten wird von den meisten Helfern nicht toleriert, denn damit stellst Du einerseits die Kompetenz der Helfer jedes einzelnen Forums und Newsgroup in Frage und bewirkst zudem, dass ein zig-faches an Stunden aufgewendet wird, um nur ein einziges Problem zu lösen, denn überall werden sich die Helfer daran setzen, eine Lösung für Dich zu finden. Das ist ganz klar ein Missbrauch an dem kostenlosen und freiwilligen Support, der hier angeboten wird. Wenn Deine Frage klar und deutlich gestellt wurde, dann wirst Du ganz bestimmt innerhalb kürzester Zeit eine Antwort erhalten. Sollte dies auch nach mehreren Tagen nicht der Fall sein, dann versuche bitte die Frage besser zu formulieren. Falls Du dennoch in einem zweiten Forum posten solltest, erwähne bitte, dass Du die Frage schon woanders gestellt hast, und dass Du es tust, weil keine Lösung gefunden werden konnte.

Marcus2010 · 31. Januar 2021

@ m.scatello ok, Danke für den Hinweis, werde Crossposting dann zukünftig sein lassen .

Sempervivum · 31. Januar 2021

Wenn Du document.getElementByClassName verwendest, musst Du beachten, dass dieses eine Nodelist, in etwa ein Array mit mehreren Elementen, zurück liefert. Um alle Elemente darin zu erfassen, müsstest Du darüber wiederum ein Schleife bauen. Gemischt Klassen und IDs zu verwenden würde ich nicht empfehlen.

AndreasB · 31. Januar 2021

Sempervivum Genau! Das ist auch der Grund weshalb die Methode getElementsByClassName heist.

getElementByClassName existiert nicht.

Marcus2010 Schon allein deshalb sollte dein Code nicht funktionieren. (Dieser Fehler sollte dir aber auch in der Konsole angezeigt werden.)

Marcus2010 · 31. Januar 2021

@ AndreasB Die Idee war jetzt spontan und vorher nicht vorhanden, mach dann das ganze mit Ids und wenn ich mehrere Elemente hab mach ich halt mehrere IDs und schreib mein Bool in den String mehrmals rein (macht die SPS) dann erfolgt die Stringübergabe und das soll der Webserver (bzw. die Webseite ) dann ohne Konvertierung als Array of Bools interpretieren.

Code unabhänging vom Datentyp bzw. Variablenname
:="Db_fuer_Webpage".Licht_Satus: ( kann Bool, Int , String usw. sein )

Datentyp Inhalt Darstellung auf Webseite

Bool 1 1

String abc abc
Int 10 10

Real 16.0 1,60e^1

im "trockenen" hab ich jede Menge Fehler im Code bzw. die Verschwinden, wenn ich das ganze über den Webserver auf der SPS ansehe.

Marcus2010 · 31. Januar 2021

Bei beiden Seiten ist der Identisch Code einmal Trocken und einmal auf den Webserver (mit eingesetzten Variablen)

Marcus2010 · 31. Januar 2021

Meine Idee den Inhalt [0,1,1,0,........] als in einer SPS Varible zu übergeben und den Inhalt vom Script als Array zu interpretieren haut leider nicht ganz hin

Der beim Testarray geht der andere leider nicht

Marcus2010 · 31. Januar 2021

Beide Ergebnisse links die SPS Version und rechts die mit den Testarry

Sempervivum · 31. Januar 2021

Ich versuche gerade, die Bilder zu verstehen:

Posting #11: Mit "trocken" meinst Du, dass der Code einfach im Browser läuft ohne die SPS-Umgebung? Dann müsste links auf den Webserver (mit eingesetzten Variablen) und rechts trocken sein?

Posting #12 verstehe ich aber das Array sieht auf beiden Screenshots gleich aus und ich habe keine Erklärung, dass es auf der SPS nicht funktioniert. Nur die Vermutung dass das Ersetzen der Platzhalter irgend wie asynchron erfolgt und noch nicht erledigt ist, wenn die Funktion aufgerufen wird. Funktionieren die Skripts denn, wenn Du kein Array verwendest sondern eine einfache Variable?

Posting #13 verstehe ich, man sieht, dass das Einfärben nicht funktioniert hat.

Unterstützt der Webserver des SPS denn die gängigen Debug-Möglichkeiten, insbesondere mit Ausgaben in der Console?

Marcus2010 · 31. Januar 2021

ja trocken heißt ohne SPS Umgebung, das Projektierungsprogramm der SPS erzeugt daten aus dem Code der Webseite und der wird dan übertragen und die Webseite der SPS ist über die IP im Netzwerkt bzw. über VPN erreichbar.

ja bei 11 ist die Webseite links über die Ip geöffnet und recht normaler Speicherpfad auf C

zu Posting 12 die Scripts SetStatus (erstes Script nach </html> ) gehen ( Linkes Bild im Posting 13 die Buttonsfärbung und Text )

Debugging ist im Browser möglich.

Sempervivum · 31. Januar 2021

Dann lass uns doch mal dieser Vermutung nachgehen:

Zitat

Nur die Vermutung dass das Ersetzen der Platzhalter irgend wie asynchron erfolgt und noch nicht erledigt ist, wenn die Funktion aufgerufen wird.

Das müsste sich überprüfen lassen, indem man den betr. Parameter in der Console ausgibt:

Code

function onofflight(Status,Name)

{
console.log(Status);



for(var i=0; i<3; i++)

{

if (Status[i] =='0')

{

document.getElementByClassName(Name[i]).setAttribute("fill", "white");

....

}

Alles anzeigen

Marcus2010 · 31. Januar 2021

Der Code wird so geschrieben

SetStatus("0",":="Db_fuer_Webpage".Licht_Garten.Read:", "Backyardbutton", "Aus", "Ein","0");

SetStatus("0",":="Db_fuer_Webpage".Licht_Einfahrt.Read:", "Frontyardbutton", "Aus", "Ein","0");

SetStatus("0",":="Db_fuer_Webpage".Licht_Garage.Read:", "Garagebutton", "AUs", "Ein","0");

</script>

Und sieht dann in der SPS z.B. so aus (Posting 12 ) 3 Buttons Grün und einer aus ( Im Bild sind aber alle aus) und gleiche Funktion ist auch bei Posting 11 im für die Buttons im Einsatz.

SetStatus("0","0", "Backyardbutton", "Aus", "Ein","0");

SetStatus("0","1", "Frontyardbutton", "Aus", "Ein","0");

SetStatus("0","1","Garagebutton", "AUs", "Eind,"0");

</script>

Sempervivum · 31. Januar 2021

OK, das wäre dann die Variante ohne Array. Funktioniert das denn?

Marcus2010 · 31. Januar 2021

Fehler gefunden ( hab alles nochmal in einer VM, da dort die Projektierungssoftware ist und da ist noch die alte Funktion drin, für den neuen Aufruf. Kann dann auch nicht gehen Ich änder mal die function onofflight auf den neuen Aufruf um, dann müsste es laufen.

onofflight("0","Test1");

onofflight("1","Test2");

onofflight("0","Test3");

</script>

mit ( im einer externen Js Datei )

function onofflight(Status,Name)

{

if (Status =='0')

{

document.getElementById(Name).setAttribute("fill", "white");

}

if (Status =='1')

{

document.getElementById(Name).setAttribute("fill", "yellow");

}

m.scatello · 31. Januar 2021

Marcus2010

Nur mal zur Info:

Benutze bitte bei Quellcodes die Formatierungsmöglichkeiten des Forums, in dem du auf html-seminar.de/woltlab/attachment/2836/ klickst.

SVG Grundelemente mit JS ändern mit Hilfe eines ID Array

Jetzt mitmachen!

Teilen