[GELOEST] Value der Optionen als Alert anzeigen lassen

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

DerLehrling

Neues Mitglied
17 Juni 2020
5
0
1
27
Hi nochmal und ich entschuldige mich gleich dafür, dass ich noch nicht sonderlich fit bin, wenn es um die Computersprache geht.
Nachdem ich mich mit HTML und CSS auseinandergesetzt habe (und auch ein wenig Ordnung in meine Schreibweise eingebracht habe), möchte ich mich nun mit JavaScript auseinandersetzen. Mein Dozent hat mir für mein Vorhaben onclick vorgeschlagen. Das geht aber über den zu behandelnden Stoff hinaus. Nach Stunden der Suche bin ich nun etwas verzweifelt, weil ich keine Antwort für mein Problem finde.

Es geht konkret darum, dass ich 3 wählbare Optionen habe. Ich möchte window.alert mit Inhalt der values von den Option geöffnet bekommen, aber es klappt einfach nichts. Ich wollte hier nachfragen, ob mir geholfen werden kann (Die bisherigen Codes habe ich wieder gelöscht, weil sie mir ständig "select" kaputt gemacht haben.

Hier sind die bisherigen Optionen:
<form action="select.html">
<div align= "center"><label><h4>Fragen:</h4><p>
<select name="Frage" style="width:500px" size="1">
<option disabled>Frage auswählen</option></disabled>
<option value= "1">Frage 1</option>
<option value= "2">Frage 2</option>
<option value= "3">Frage 3</option>
</select>
<button id="button">Antwort</Button>
</div></label>
</form>

P.S. Ich wäre mehr als Dankbar, wenn man mir erklärt was ich zu tun habe, damit ich es das nächste mal alleine schaffe.

Ich freue mich auf eure Antworten
Grüße
DerLehrling
 

basti1012

Senior HTML'ler
26 November 2017
1.312
131
63
39
Minden
sebastian1012.bplaced.net
Mein Dozent hat mir für mein Vorhaben onclick vorgeschlagen
Nicht gerade die beste auswahl.
Aber darf man machen.
Dann würde das so reichen
HTML:
<label>Fragen:</label>
<select id="auswahl" name="Frage" style="width:500px" size="1">
<option disabled>Frage auswählen</option></disabled>
<option value= "1">Frage 1</option>
<option value= "2">Frage 2</option>
<option value= "3">Frage 3</option>
</select>
<button onclick="alert(document.getElementById('auswahl').value)">Antwort</Button>
Ich würde das onclick vergessen und mit addEventListener arbeiten
HTML:
<label>Fragen:</label>
<select id="auswahl" name="Frage" style="width:500px" size="1">
<option disabled>Frage auswählen</option></disabled>
<option value= "1">Frage 1</option>
<option value= "2">Frage 2</option>
<option value= "3">Frage 3</option>
</select>
<button id="button">Antwort</Button>
<script>
 document.getElementById('button').addEventListener('click',function(){
      alert(document.getElementById('auswahl').value)
 })
</script>
Du brauchst addEventlistener immer wieder bei bestimmten Events
Deswegen versuche es gleich damit.
Es ist auch bei größeren Projekten übersichtlicher als wenn man bei vielen Tags irgendwelche inline Events in den Html schreibt.