Input-Daten über localStorage zu anderer HTML-Seite übertragen

[MariusMedo]

Hallo zusammen,

ich bastele aktuell an einem Live-Scoreboard für einen Sport-Livestream auf Basis von HTML, CSS und Javascript. In OBS (Open Broadcaster Software) kann ich eine "Admin-Panel"-HTML-Datei in das Interface integrieren, weshalb diese Lösung mir sehr entgegen kommt und recht simpel ist.

Das Scoreboard ist auch soweit funktionabel. Punkte, Sätze und Gesamtspielstand (es geht hier um Badminton) kann ich per Button-Klick im Admin-Panel direkt in OBS steuern. Allerdings muss ich aktuell noch die Spieler- und Teamnamen händisch in den Code einpflegen. Das funktioniert nicht so super, da OBS die hinterlegten Dateien in seinem eigenen integrierten Browser öffnet, aber nicht aktualisiert, sollte die Datei verändert worden sein. Das ist natürlich sehr ärgerlich, da ich während einem Spiel, das ich übertrage, 8x die jeweilige Begegnung neu eingeben muss.

Um ein manuelles aktualisieren (mit eventuellen OBS-Browser-Problemen dabei) zu verhindern, sodass der Livestream jederzeit über einen aktuellen Spielstand verfügt, wollte ich nun auch mehrere <input>'s ins Admin-Panel einfügen, in denen man die jeweiligen Felder direkt in OBS kurz vor der Übertragung eintragen kann.

Bei den Buttons war das auch kein Problem. Die Umsetzung mit dem Input macht mir allerdings große Probleme. Ich bekomme den eingegebenen Text einfach nicht in die andere Datei rein. Ich habe das ganze schon auf mehrere Arten versucht (unter anderem auf die gleiche wie mit den Buttons zur Erhöhung des Punktestands), aber es hat bisher nichts geholfen. Nach 20 Stunden des Herumprobierens wende ich mich nun doch an andere Javascript-Kennende (ich bin übrigens ein recht blutiger Anfänger mit einiger Web-Vorerfahrung von vor 15 Jahren in u.a. PHP, CSS, HTML. D.h. ich verstehe evtl nicht alles, aber kann es mir durchaus erarbeiten), da ich sonst aufgebe.

Ich habe den zuletzt verwendeten Code versucht zu vereinfachen, um mir die Logik klarzumachen und es dann in meinen Code einzufügen. Deshalb habe ich mir 2 Dateien erstellt: 1.) Die Datei mit dem Text, der verändert werden soll und 2.) die Datei mit dem Input-Feld, das den Text für die Übertragung in die andere Datei stellt. Beide Dateien enthalten auch zumindest ein wenig Javascript-Code. Ich arbeite mit localStorage, um die Informationen auf die andere Seite zu bringen.

So sieht der (vereinfachte) Code aus (den ich in genau dieser vereinfachten Variante erstmal zum Laufen bringen möchte): ----sorry, kann den Code hier wegen einem Fehler im Board bei der Übermittlung nicht als Code ausweisen. Deshalb angehängt als Dateien über den (allseits bekannten?) Filehoster Filehorst :P ----- Und vergesst die Dateinamen und Überschriften. Ich wollte lediglich mal irgendwas ausprobieren, nachdem ich im Originalcode die Übersicht nicht zerstören wollte. Dateinamen machen also nicht soviel Sinn:

Datei von filehorst.de laden

Datei von filehorst.de laden


Könnt ihr mir helfen ? Was mache ich falsch, bzw gibt es etwas besonderes zu beachten bei input-Feldern ?

LG Marius

[Christian Marquardt]

https://www.w3schools.com/jsref/prop_text_value.asp

localStorage.getItem('NameTeam') = document.getElementbyId("inputtext");

...fehlt das Value

[MariusMedo]

https://www.w3schools.com/jsref/prop_text_value.asp

localStorage.getItem('NameTeam') = document.getElementbyId("inputtext");

...fehlt das Value

funktioniert aber leider auch nicht mit .value hinten dran Also, damit das eindeutig ist, was ich gemacht habe: localStorage.getItem('NameTeam') = document.getElementbyId("inputtext").value;

[Christian Marquardt]

Sicher, denn localStorage.getItem zum setzen eines Wertes?

https://www.w3schools.com/jsref/prop...calstorage.asp

[MariusMedo]

jetzt hab ich meinen ganzen Code nochmal umgeschrieben. Da immer noch nichts geht, gebe ich jetzt auf. Ich verstehs nicht. Mittlerweile krieg ich noch nichtmal eine Änderung per Buttonklick hin, die ja bereits in meinem bisherigen Skript klappt. Ich bin jetzt vollends durcheinander. Danke trotzdem für den Versuch einer Hilfe. Gute Nacht allerseits.

[basti1012]

Irgendwie ist da alles falsch.

in der calc.html

localStorage.setItem('Teamname', NameTeam);
function reload() {
document.getElementById('Teamname').innerHTML = localStorage.getItem('NameTeam');
} setInterval('reload(), 1')


Warum setItem ?
Du überschreibst damit den vorhanden Eintrag, in deinem Fall ist NameTeam ein undefined weil Du die Variable nicht definiert hast
Funktion kannst du löschen
setInterval erst recht, weil mit den Wert 1ms stürzt der Browser ab.
Wenn dann Timeout mit 10ms , alles darunter ist kaum möglich.
Aber wie gesagt , setTimeout kann hier auch weg.

change.html


var NameTeam = "unbekanntes Team";
function changeName() {
localStorage.getItem('NameTeam') = document.getElementbyId("inputtext");
}

Was soll die Variable NameTeam da ?
Die wird nirgendwo benutzt.
getItem ist hier falsch, weil Du willst was speichern , also setItem.
document.getElementById wird mit GOSSEN B geschrieben
,value fehlt, sonst bekommt man nur das Element.


So geht das.
Ich kann hier kein Code posten. Der Forum-Interpret spinnt.

Ich poste das mal woanders Moment.
Edit:
Zum Testen und den Code findest Du im Quelltext
https://basti1012.bplaced.net/andere/marius/change.html
https://basti1012.bplaced.net/andere/marius/calc.html

[MariusMedo]

Irgendwie ist da alles falsch.
So geht das.
calc.html

Ich kann hier kein Code posten. Der forum interpret spinnt

Ich poste das mal wo anders Moment.
Edit:
Zum testen und den Code findest du im Quelltext
https://basti1012.bplaced.net/andere/marius/change.html
https://basti1012.bplaced.net/andere/marius/calc.html

Hey Basti!,

Vielen lieben Dank, das ist es was ich brauchte. Ich schau mir das mal an, wie du das jetzt gemacht hast und bastele mir das in meinen Code Danke vielmals!

[MariusMedo]

Also ich habe jetzt mal den Code und die Variablen so umgeschrieben, wie ich sie brauche, und dass das ganze jetzt auch etwas hübscher aussieht. Deshalb sind jetzt zwei Inputfelder in "change.html" drin, die beide durch jeweiligen Klick auf den jeweiligen Button auf der zweiten Seite "calc.hml" ausgewertet werden sollen, bzw. soll eben einfach der Text auf der "calc.html" ausgetauscht werden über das Javascript mit localStorage. Das funktioniert auch eigentlich. Aber ich verstehe gerade nicht, warum ich durch Klick auf den unteren Button gar keinen Effekt erziele und warum ich mit dem Klick auf den oberen Button (zugehörig zum oberen Inputfeld laut id="" Attribut) über Javascript das untere Inputfeld übergebe.

Ich dachte ursprünglich, dass es nur ein Leichtsinnsfehler in den id's bzw Variablen ist, aber nööö, müsste eigentlich so richtig sein. Vielleicht kann da einer mal reinschauen und überlegen, warum es nicht funktioniert.... Da würde ich mich sehr freuen

Datei von filehorst.de laden
Datei von filehorst.de laden

[basti1012]

Kannst du die Codes mal hier posten. Ich habe das versucht runterzuladen und habe irgendwie die gleichen Daten die beim mir auf den Server liegen bekommen.
Poste beide Dateien hier als Code, das ist einfacher, schneller und sicherer.