Simi: Werte aus einer Dropdown liste auslesen und ausgeben

Hi zusammen Ich möchte eine kleine Webseite entwicklen, bei der ich Daten an einen uC über Wlan sende. (es geht um eine RGB steuerung) In einer Dropdown liste kann man die gewünschte Stärke der einzlenen Farben auswählen. Dieser Wert soll dann an den uC gesendet werden.

Mien Problem ist nun, ich wollte zuerst einmal schauen ob es die Werte überhaupt richtig erkennt (Da mir noch die Funk- Module fehlen).

Zu diesem Zweck habe ich mittels java- Script die Werte aus den Dropdown listen in eine Variable gespeichert und will diese nun ausgeben. Jedoch geschieht dies nicht. Kann mir da jemand weiter helfen wo mein Fehler liegt? Vielen Dank

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>RGB_Steuerung</title>
	<style>
	p{ font-size: 18px; 
		font-family: DIN; 
		margin-bottom: 18px;}
	label{ font-size: 18px; 
			font-family: DIN;}
	h1{ font-family: DIN;
		font-size: 36px;}
	
	
	</style>
</head>
<body>
	<main>
		<h1>RGB Steuerung</h1>
		<p> Bitte geben Sie die IP Adresse an:</p>
		<input type = "number" id = "IPAdresse" name = "IPAdresse">
		<br>
		<p>Bitte waehlen Sie die gewuenschte Fabrstaerke aus:</p>
		<table>
			<tr>
				<td bgcolor=#FF0000>ROT</td>
				<td bgcolor=#00FF00>GRUEN</td>
				<td bgcolor=#3264FF>BLAU</td>
			</tr>
			<tr>
				<td><form action ="#" id = "Rot">
						<select name = "BereicheRot" id = "rot">
							<option value = 0x00>Aus</option>
							<option value = 0x40>Quater</option>
							<option value = 0x7F>Half</option>
							<option value = 0xC0>ThreeQuater</option>
							<option value = 0xFF>Full</option>
						</select>	
					</form>
				</td>
				<td><form action ="#">
						<select name = "BereicheGruen" id = "gruen">
							<option value = 0x00>Aus</option>
							<option value = 0x40>Quater</option>
							<option value = 0x7F>Half</option>
							<option value = 0xC0>ThreeQuater</option>
							<option value = 0xFF>Full</option>
						</select>	
					</form>
				</td>
				<td><form action ="#">
						<select name = "BereicheBlau" id = "blau">
							<option value = 0x00>Aus</option>
							<option value = 0x40>Quater</option>
							<option value = 0x7F>Half</option>
							<option value = 0xC0>ThreeQuater</option>
							<option value = 0xFF>Full</option>
						</select>	
					</form>
				</td>
			</tr>
			<tr>
				<td id = "r1"></td>
				<td id = "g1"></td>
				<td id = "b1"></td>
			</tr>
				
		</table>
		<div><input type="button" value="Send" onclick="sendRequest()"></div>
		
<script language = "JaveScript" type = "text/JaveScript">

function sendRequest()
{
	
	var RED = document.getElementById("rot").value;
	var GREEN = document.getElementById("gruen").value;
	var BLUE = document.getElementById("blau").value;
	
	document.getElementById("r1").innerHTML = RED;
	document.getElementById("g1").innerHTML = GREEN;
	document.getElementById("b1").innerHTML = BLUE;
	
	
}	
</script>
</body>		
</html>	
  1. Hallo Simi,

    <script language = "JaveScript" type = "text/JaveScript">

    die Sprache nennt sich "JavaScript"!

    Oder verwende besser die Kurzform <script>

    Grüße, Martl

  2. Vielen Dank.. habe es soben auch endteckt gehabt

  3. @@Simi

    Dein Markup ist an einigen Stellen fehlerhaft:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    

    Das schaltet Browser in den Quirks-Modus; den sollte man jedoch vermeiden. Außerdem willst du HTML5 verwenden. Also auch dementsprechend:

    <!DOCTYPE html>
    

    <html>
    

    Die Angabe der Sprache des Inhalts fehlt. In deinem Fall deutsch:

    <html lang="de">
    

    <head>
    

    Es kann nicht schaden, darin die Zeichencodierung anzugeben (welche UTF-8 sein sollte):

    <meta charset="UTF-8"/>
    

    Auch die Angabe

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    

    sollte nicht fehlen, damit die Seite auch auf Mobilgeräten vernünftig dargestellt wird.


    		<p> Bitte geben Sie die IP Adresse an:</p>
    		<input type = "number" id = "IPAdresse" name = "IPAdresse">
    

    Das Eingabefeld hat keine zugehörige Beschriftung. Das ist zu korrigieren zu:

    		<p><label for="IPAdresse">Bitte geben Sie die IP-Adresse an:</label></p>
    		<input type="number" id="IPAdresse" name="IPAdresse">
    

    oder auch

    		<p>Bitte geben Sie die <label for="IPAdresse">IP-Adresse</label> an:</p>
    		<input type="number" id="IPAdresse" name="IPAdresse">
    

    Das Deppenleerzeichen hab ich hier gleich mal mit korrigiert.

    Entsprechend auch die Labels für alle anderen Eingabefelder (auch für select) setzen!


    				<td><form action ="#" id = "Rot">
    

    Warum getrennte Formulare für Rot, Grün, Blau anstatt eins, das die gesamte Tabelle und den Submit-Button enthält?


    <script language = "JaveScript" type = "text/JaveScript">
    

    Vom schon genannten Schreibfehler abgesehen: language="JavaScript" war schon immer unsinnig; type="text/javascript" ist in HTML5 nicht mehr erforderlich.

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. Hallo Gunnar,

      Das Eingabefeld hat keine zugehörige Beschriftung. Das ist zu korrigieren zu: …

      das eigentlich Wichtige dürfte hier die Anmerkung sein, daß ein <input type="number"> wohl eher ungeeignet ist, oder notiert man IPVx-Adressen neuerdings ohne Punkt und Komma?

      Grüße, Martl