Frage JavaScript-Ergebnisse in HTML weiterverwenden

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

MacInternet

Neues Mitglied
30 Mai 2021
12
0
1
62
Hilfe! Ich fummel da schon über 2 Wochen rum und komme einfach nicht weiter!

Der Anwender soll auf der Seite einen Song und eine Nummer per Dropdown-Liste auswählen - das klappt jetzt schon, aber ich will die beiden Auswahlen anschließend mehrmals noch in HTML verwenden - und bekomme das einfach nicht hin!

Wer kann mir denn mal weiter helfen bitte? Also ich möchte anschließend sowohl die Nummer der Auswahl als auch den Titel noch verwenden und das mehrmals - nur wie??
Die Auswahl ist in JavaScript, das Formular aber in HTML.

Ich hoffe mal, es ist korrekt, wenn ich die nötigen Zeilen hier jetzt einfüge, ich habe nichts gefunden, wo man Quelltext eingeben könnte. Und ich wäre für jeden Tipp, der mich endlich weiter bringt, nun dankbar!

Quellcode:

<!DOCTYPE HTML>
<html>
<head>

<script>

document.addEventListener('DOMContentLoaded', function () {

document.Testform.Song.addEventListener('change', CheckAuswahl);

function CheckAuswahl () {
var menu = document.Testform.Song;
document.querySelector('output').innerHTML = menu.options[menu.selectedIndex].value;
}

});


</script>

</head>
<body>

<font face="VERDANA,ARIAL,HELVETICA">
<br> <br> <h4>Bitte zuerst den gew&uuml;nschten Song ausw&auml;hlen: </h4> <br><br>

<font size="+1"><form name="Testform">
<form action="#">
<label>Titel (bitte ausw&auml;hlen):
<select name="Song">
<option value="">Bitte w&aumlhlen</option>
<option value="126">Song-Titel No. 1</option>
<option value="127">Song-Titel No. 2</option>
<option value="128">Song-Titel No. 3</option>
<option value="129">Song-Titel No. 4</option>
<option value="130">Song-Titel No. 5</option>

</select>

</label>
</form>
</p>
<p>
<br> <br>
<b> Ausgew&aumlhlt: Song Nr: <font size="+2"> <font color="#800000"> <output> </output> </b></font> </font>
</p></font>
Ich m&ouml;chte das Passwort f&uuml;r diesen Song anfordern: Ab hier soll es dann eingefügt werden!
</font>

<body>

 

sandreas

Mitglied
29 April 2009
43
6
8
Mmh leider ist die Frage etwas unverständlich formuliert. "In HTML weiter verwenden" musst du genauer ausführen.

Tipp: Das HTML ist etwas altbacken (<font>) und es fehlt ein </html> am Schluss
 

MacInternet

Neues Mitglied
30 Mai 2021
12
0
1
62
Also dass da mal ein End-Code fehlt, ist leider fast immer so, wenn man aus einem 4-Seiten Quellcode alles raus löscht, was hier jetzt zur Frage nicht hin gehört...

Und mein HTML ist Dir also "veraltet"? Sorry, aber ich habe es vor 42 Jahren gelernt und weiß jetzt nicht, wo denn steht, dass ich, was jahrzehntelang bis heute problemlos funktioniert hat, nun nicht mehr verwenden dürfte...

Auch die Problem-Beschreibung steht sowohl in der Überschrift als auch im Quelltext selber: Wie kann ich in Javascript ausgelesene Werte (durch Dropdown-Auswahl) in HTML (am Ende des Codes!) weiter verwenden? Sämtliche bislang probierte Möglichkeiten funzten nämlich nicht - und vor über 40 Jahren gab es nun mal weder HTML5 noch sonst was, auch kein DOM oder Javascript... :-(
Ich will die Auswahl, die der User getroffen hat, weiter verwenden - aber nicht in Javascript!

Gruss Mac
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.477
474
83
68
weiß jetzt nicht, wo denn steht, dass ich, was jahrzehntelang bis heute problemlos funktioniert hat, nun nicht mehr verwenden dürfte...
Z. B. hier, MDN ist eine sehr verlässliche Quelle:
In 42 Jahren hat sich in der Webentwicklung sehr viel verändert ...

ich habe nichts gefunden, wo man Quelltext eingeben könnte.
Das ist leider in diesem Forum etwas versteckt. In der Werkzeugleiste oben findest Du rechts von der Mitte ein Menüsymbol mit drei Punkten, wenn Du darauf klickst, öffnet sich ein Untermenü mit diesem Symbol: </> Das kannst Du zum Einfügen von Code verwenden.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.477
474
83
68
Zu deiner eigentlichen Frage: Meinst Du dies?
HTML:
<p>
    Ausgew&aumlhlt: Song Nr: <span class="song-nr"></span>
</p>
Ich m&ouml;chte das Passwort f&uuml;r diesen Song anfordern: <span class="song-nr"></span>
Und hier noch Mal die Nummer des Songs: <span class="song-nr"></span>
Javascript:
function CheckAuswahl () {
    const menu = document.Testform.Song,
        songNr = menu.value,
        songTitle = menu.options[menu.selectedIndex].innerHTML;
    document.querySelectorAll('.song-nr').forEach((item, idx) => {
        item.textContent = songNr;
    });
}
Ebenso kannst Du den Titel überall, wo er gebraucht wird, einfügen.
 

MacInternet

Neues Mitglied
30 Mai 2021
12
0
1
62
Danke, Sempervivum, genau so etwas meinte ich, jedoch waren meine beiden grössten Probleme, dass 1. eben nur immer die Song-Nr, aber nie der Titel ausgegeben wurde und 2. dass auch immer nur EINMAL eine Ausgabe dann möglich war - aber ich werde das hier gleich mal bei mir einbauen und testen! Vielen Dank für den Hinweis! Wenn das jetzt mit dem Titel auch noch mal gehen würde...

PS: Bei mir verschwindet bei den 3 Punkten leider nur die Sidebar oder blendet sich wieder ein... Da kann leider nirgendwo Code eingegeben werden.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.477
474
83
68
Nein, das Symbol meinte ich nicht, sondern in der Werkzeugleiste für das Verfassen eines Beitrags:
codebutton.png
 

jonas3344

Aktives Mitglied
25 Oktober 2019
159
44
28
38
2021 - 1993 (Definition von HTML durch Tim Berners-Lee) = 28 Jahre.

Wie gehen da 42 Jahre? :D
 

MacInternet

Neues Mitglied
30 Mai 2021
12
0
1
62
Hallo Sempervivum,
hab alles eingebaut - aber leider wird auch bei Deinem Beispiel weder die Song-Nr noch der Titel auch nur einmal ausgegeben! Immerhin hatte ich schon mal die Nr, wenn auch den Titel nicht... Aber es muss doch möglich sein, so was nur einfach mal in HTML auszugeben! Verdammt...

Ach ja, das mit den 3 Punkten hatte ich wohl falsch verstanden - sorry, war das erste Mal in so einem Forum...
Gruß Mac
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.477
474
83
68
Was ich gepostet hatte, war nicht getestet. Ich habe jetzt das HTML ein wenig bereinigt und dieses funktioniert bei mir für die Nummer aus dem value:
Code:
<!DOCTYPE HTML>
<html>

<head>
    <title>Test Select</title>
    <script>

        document.addEventListener('DOMContentLoaded', function () {

            document.Testform.Song.addEventListener('change', CheckAuswahl);

            function CheckAuswahl() {
                const menu = document.Testform.Song,
                    songNr = menu.value,
                    songTitle = menu.options[menu.selectedIndex].innerHTML;
                document.querySelectorAll('.song-nr').forEach((item, idx) => {
                    item.textContent = songNr;
                });
            }
        });


    </script>

</head>

<body>
    <h4>Bitte zuerst den gew&uuml;nschten Song ausw&auml;hlen: </h4>
    <form name="Testform">
        <label>Titel (bitte ausw&auml;hlen):
            <select name="Song">
                <option value="">Bitte w&aumlhlen</option>
                <option value="126">Song-Titel No. 1</option>
                <option value="127">Song-Titel No. 2</option>
                <option value="128">Song-Titel No. 3</option>
                <option value="129">Song-Titel No. 4</option>
                <option value="130">Song-Titel No. 5</option>

            </select>
        </label>
    </form>
    <p>
        Ausgew&aumlhlt: Song Nr: <span class="song-nr"></span>
    </p>
    Ich m&ouml;chte das Passwort f&uuml;r diesen Song anfordern: <span class="song-nr"></span>
    Und hier noch Mal die Nummer des Songs: <span class="song-nr"></span>
</body>

</html>
Versuche, es selbst für den Titel zu erweitern.
 

MacInternet

Neues Mitglied
30 Mai 2021
12
0
1
62
Das sieht schon mal super aus! Zumindest die Song-Nummer kann jetzt tatsächlich mehr als nur einmal ausgegeben und dann weiter verwendet werden! Danke - aber wie gesagt: mit dem Titel habe ich es bereits versucht, aber da schweigt sich der Editor leider weiterhin aus. :-(
Ich hoffe, es klingt jetzt nicht unverschämt, aber weil ich genau da dran schon 2 Wochen ohne Ergebnis fummel: es ist m.E. nur noch eine Zeile - könntest Du mir das für den "Titel" nicht auch noch sagen? Danke Dir schon mal im Voraus!

Bei der Gelegenheit:. vor ein paar Jahren hatte ich einen Rechner-Wechsel und musste daher auch den Editor wechseln: seither benutze ich "Phase 5", immerhin kann der auch Javascript verarbeiten, aber was fehlt, ist die Möglichkeit, nur mal den Inhalt von Variablen an bestimmten Stellen zu überprüfen - kennst Du da vielleicht einen besseren Editor?

Gruß Mac
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.477
474
83
68
Kein Problem:
Code:
<!DOCTYPE HTML>
<html>

<head>
    <title>Test Select</title>
    <script>

        document.addEventListener('DOMContentLoaded', function () {

            document.Testform.Song.addEventListener('change', CheckAuswahl);

            function CheckAuswahl() {
                const menu = document.Testform.Song,
                    songNr = menu.value,
                    songTitle = menu.options[menu.selectedIndex].innerHTML;
                document.querySelectorAll('.song-nr').forEach((item, idx) => {
                    item.textContent = songNr;
                });
                document.querySelectorAll('.song-title').forEach((item, idx) => {
                    item.innerHTML = songTitle;
                });
            }
        });


    </script>

</head>

<body>
    <h4>Bitte zuerst den gew&uuml;nschten Song ausw&auml;hlen: </h4>
    <form name="Testform">
        <label>Titel (bitte ausw&auml;hlen):
            <select name="Song">
                <option value="">Bitte w&aumlhlen</option>
                <option value="126">Song-Titel No. 1</option>
                <option value="127">Song-Titel No. 2</option>
                <option value="128">Song-Titel No. 3</option>
                <option value="129">Song-Titel No. 4</option>
                <option value="130">Song-Titel No. 5</option>
            </select>
        </label>
    </form>
    <p>
        Ausgew&aumlhlt: Song Nr: <span class="song-nr"></span> und Titel: <span class="song-title"></span>
    </p>
    Ich m&ouml;chte das Passwort f&uuml;r diesen Song anfordern: <span class="song-nr"></span>
    Und hier noch Mal die Nummer des Songs: <span class="song-nr"></span> und der Titel: <span
        class="song-title"></span>
</body>

</html>

Wenn Du den Inhalt von Variablen überprüfen willst, brauchst Du einen Debugger und der ist bei den Browsern eingebaut.
Phase5 war mal ein super Editor, ist aber inzwischen veraltet. Ich empfehle statt dessen Visual Studio Code.
 

MacInternet

Neues Mitglied
30 Mai 2021
12
0
1
62
BINGO! Jetzt klappt es auch mit dem Titel - 1000 Dank, bist ein Engel! Ich wusste doch, dass ich immer irgendwo irgendwas vergesse, wenn ich in JS rum fummel... ;-)

Super, hast mit wirklich geholfen und nun sehe ich auch, was ich dauernd falsch gemacht habe! Gleich mal alles nehmen und wieder in meinen Code dann rein packen...

Viele Grüsse und einen schöne Woche noch,
wünscht Mac

PS: Hatte mal gehört, Visual Studio Code kann nur VBA? Ist aber auch schon Jahre her. Ich schau gleich mal, danke für den Tipp! Und ja, so richtig Up to Date scheint auch Phase 5 heute nicht mehr zu sein- der interne Browser dort kann fast gar nichts, aber ich habe dort mehrere Standard-Browser eingebunden, aber auch das half nicht weiter, weil man das Programm auch nicht unterwegs anhalten kann leider.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.477
474
83
68
Hatte mal gehört, Visual Studio Code kann nur VBA?
Das trifft definitiv nicht zu, er kann eine breite Palette von Programmier- und Auszeichnungssprachen, inkl. HTML, CSS, JS, PHP, Python, und und und.
 

tk1234

Aktives Mitglied
2 September 2020
130
28
28
Und ja, so richtig Up to Date scheint auch Phase 5 heute nicht mehr zu sein- der interne Browser dort kann fast gar nichts,
Das ist jetzt nicht unbedingt das Problem, das Problem an Phase 5 ist dass er kein UTF-8 kann und damit nichts mehr taugt - mit einem richtigen Editor gibt es nämlich keinen Grund Umlaute zu verst&uuml;mmeln ...
 

MacInternet

Neues Mitglied
30 Mai 2021
12
0
1
62
Hallo Sempervivum, ich wage es noch mal, Dich anzusprechen, habe aber nirgendwo hier eine Funktion wie "Privatnachricht" oder so etwas gefunden.

Inzwischen habe ich nicht nur den Code eingebaut überall und im Prinzip funktioniert jetzt fast alles - bis auf eine Sache: Da gibt es (z.B. auf der gleichen Seite) weitere Forms (z.b. mit method 'post' etc.) und obwohl es möglich ist, die "SongNr" z.b. in eine Mail eintragen zu lassen, gelingt es mir dennoch nicht, die bereits ja deklarierte Variable in ein Input-Feld des anderen Formulars eintragen zu lassen... Schlimmer noch: sowie ich deshalb eine andere Variable (z.B. "ausgabe") im Script über let oder var definiere, sind sofort alle Inhalte wieder weg. :-(

Gibt es da irgendeinen "Trick" oder so was dafür, dennoch den Wert in ein "Value" des Input-Feldes eintragen zu lassen, der mir irgendwie jetzt nicht bekannt nicht...? Jedenfalls wäre ich schon für einen letzten Hinweis diesbezüglich sehr dankbar, denn alles scheitert nun daran, dass das Input-Feld leider leer bleibt...

Viele Grüsse und endlich ist es mal ein wenig wärmer jetzt geworden,
Mac
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.477
474
83
68
Das Problem dabei ist, dass wir bisher die Werte mit textContent bzw. innerHTML eingetragen haben. Bei einem Input-Feld geht das nicht, sondern Du musst statt dessen das value-Attribut setzen:
Code:
<!DOCTYPE HTML>
<html>

<head>
    <title>Test Select</title>
    <script>

        document.addEventListener('DOMContentLoaded', function () {

            document.Testform.Song.addEventListener('change', CheckAuswahl);

            function CheckAuswahl() {
                const menu = document.Testform.Song,
                    songNr = menu.value,
                    songTitle = menu.options[menu.selectedIndex].innerHTML;
                document.querySelectorAll('.song-nr').forEach((item, idx) => {
                    item.textContent = songNr;
                });
                document.querySelectorAll('.song-nr-input').forEach((item, idx) => {
                    item.value = songNr;
                });
                document.querySelectorAll('.song-title').forEach((item, idx) => {
                    item.innerHTML = songTitle;
                });
            }
        });


    </script>

</head>

<body>
    <h4>Bitte zuerst den gew&uuml;nschten Song ausw&auml;hlen: </h4>
    <form name="Testform">
        <label>Titel (bitte ausw&auml;hlen):
            <select name="Song">
                <option value="">Bitte w&aumlhlen</option>
                <option value="126">Song-Titel No. 1</option>
                <option value="127">Song-Titel No. 2</option>
                <option value="128">Song-Titel No. 3</option>
                <option value="129">Song-Titel No. 4</option>
                <option value="130">Song-Titel No. 5</option>
            </select>
        </label>
        <input class="song-nr-input">
    </form>
    <p>
        Ausgew&aumlhlt: Song Nr: <span class="song-nr"></span> und Titel: <span class="song-title"></span>
    </p>
    Ich m&ouml;chte das Passwort f&uuml;r diesen Song anfordern: <span class="song-nr"></span>
    Und hier noch Mal die Nummer des Songs: <span class="song-nr"></span> und der Titel: <span
        class="song-title"></span>
</body>

</html>
Achte auf die Klasse "song-nr-input".
 

MacInternet

Neues Mitglied
30 Mai 2021
12
0
1
62
Whow - Du bist nicht nur super, sondern auch extrem fix! :-)
Erst noch einmal meinen herzlichsten Dank und dass es genau da ein Problem gab, habe ich ja bemerkt, auch wenn ich nicht ganz kapiert habe, warum nur bei der Eingabe eines einzigen "let" oder so gleich sämtliche Werte überall immer gelöscht werden...
Aber egal, Hauptsache, es geht jetzt endlich weiter! Das Hauptproblem bei der ganzen Sache hier ist, dass es von vielen Leuten mal erstellt wurde und mehrere Programmiersprachen sich auch noch ständig jetzt in die Quere kommen, aber ich versuche es dennoch, irgendwie alles auseinander zu klauben jetzt und bis auf das Input-Feld ging es ja auch (fast) alles schon. Nur war Javascript halt nie meine Lieblingssprache... ;-)

Vielen Dank und einen angenehmen Tag dann noch
wünscht Mac

PS: Um um einen besseren Editor wie Visual Studio z.B. werde ich mich nun auch mal bemühen!
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.477
474
83
68
Das Hauptproblem bei der ganzen Sache hier ist, dass es von vielen Leuten mal erstellt wurde und mehrere Programmiersprachen sich auch noch ständig jetzt in die Quere kommen
Kenne ich gut, vor allem aus meiner Berufstätigkeit. Dafür gab es dann den Begriff "ist historisch gewachsen". Auf der einen Seite wäre es dann angebracht, es zu bereinigen und aufzuräumen und auf der anderen Seite sagt man "wenn es läuft fass es nicht an". Und im Beruf war häufig auch gar keine Zeit für Bereinigungsarbeiten, weil schon das nächste Projekt wartete.
:smile:
Dann wünsche ich ebenfalls einen schönen Rest der Woche!
 

MacInternet

Neues Mitglied
30 Mai 2021
12
0
1
62
Oh, ein "Leidensgefährte"! Und ich dachte immer, sowas passiert(e) nur mir immer... ;-)

Habe die neue Klasse an mehreren Formularen getestet, aber leider überall dasselbe Ergebnis: in "number"-Feldern bleibt alles leer, in "text"-Feldern, die ich nur zur Kontrolle anlegte, wird dann der Name der Variablen eingetragen, aber diese hat dann keinen Wert. Irgendwie ist da der Wurm wirklich drin... Dabei sollte es doch gerade in Nummer-Feldern jetzt klappen - tut es nur nicht.

Ich glaube, ich mache die Kiste für heute jetzt aus, hier geht es erst morgen dann weiter.
Schönen, sonnigen Abend noch,
Gruß Mac