[GELOEST] Value der Optionen als Alert anzeigen lassen

[DerLehrling]

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]

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

<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

<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

JavaScript/DOM/Event – SELFHTML-Wiki

wiki.selfhtml.org

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.

 

[DerLehrling]

Vielen Dank! Ich werde mich damit gleich auseinandersetzen