[html,JavaScript] submit-Button: Funktion & Verknüpfung

OP #4216637
Lesenswert?

Hallo,

als totaler Programmieranfänger wende ich mich mit einem Problem an 
euch. Ich hoffe sehr, dass ihr mir helfen könnt. Vielleicht ist es 
möglich, dass ihr mir einige Code-Zeilen mir Erklärung schicken könntet, 
dann blicke ich auch durch ;-)

Nun zum Projekt:

Ich habe 6 Buttons erzeugt:
Kategorie:          Funktion
Richtung:           5. Rechts  6. Links
Geschwindigkeit:    3. Schnell 4.Langsam
Betrieb:            1. Start   2. Stopp

Hinter diesen Buttons werden GPIOs gesteuert die wiederum Relais 
steuern. Die Kombination der erzeugten Buttons und der Steuerung der 
GPIOs funktioniert problemlos.

Nun möchte ich aber folgende Erweiterung der Buttons vornehmen, wozu 
jedoch meine Kenntnisse nicht ausreichen:

1.) Beispielabfolge: Ich wähle "Rechts" aus, Relais schaltet. Danach 
wähle ich "Langsam" aus, Relais schaltet. Danach drücke ich Start, 
Relais schaltet und der Motor an dem alles hängt dreht sich. Da der 
Motor während des Betriebes nicht direkt mit Links in die andere 
Drehrichtung befördert werden darf, sondern über Stopp, soll der Button 
"Links" während des Betriebes "nicht anklickbar"/gesperrt sein. Erst 
wenn Stopp gedrückt worden ist, sollen "Rechts" und "Links" wieder 
auswählbar sein. Für die andere Richtung soll natürlich "Rechts" während 
des Betriebes nicht auswählbar sein.

2.) Zur Benutzerfreundlichkeit habe ich schon ein kleines Programm 
geschrieben, welches erweitert werden soll. Fährt man mit der Maus auf 
einen Button, verfärbt er sich grau. Drückt man drauf, wird er Rot. Das 
klappt allerdings nur für den "Start"-Button und auch nur im 
Zusammenhang aller Buttons und nicht Kategorie-unterteilt. Man soll für 
die jeweilige Kategorie erkennen können, welcher Button gerade aktiv 
ist.

Vielen Dank schon mal im voraus.
Makkez

Anbei mein bisheriger Code:
1
<HTML><Body><Script Language="JavaScript" Type="Text/JavaScript">
2
var Buttons = document.getElementsByName("START");
3
 
4
var Active = "";
5
 
6
function CheckButton(Num) {
7
        if (Active != "" && Active != Num) {
8
            Buttons[Active].style.backgroundColor = "#FFFFFF";
9
        }
10
        Buttons[Num].style.backgroundColor = "#F08080";
11
        Active = Num;
12
}
13
 
14
function ChangeColor (Num, Color){
15
    if (Active != Num) {
16
        switch (Color) {
17
            case '0':
18
                Buttons[Num].style.backgroundColor = "#DCDCDC";
19
                break;
20
            case '1':
21
                Buttons[Num].style.backgroundColor = "#FFFFFF";
22
                break;
23
        }
24
    }
25
}
26

27
<html><body><hl><b>STEUERUNG </hl>
28
<hr />
29

30
<html>
31
<head>
32
<meta name="viewport" content="width=device-width" />
33
<title>Projekt: Gelbe Tonne</title>
34
</head>
35
<body>
36
<br>
37
<b>Betrieb:
38
<form method="get" action="gpio.php">
39
<input type="submit" value="Start" name="START" style="BackGround-Color: #FFFFFF; Width: 70px" onMouseOver="ChangeColor('0','0')" onMouseOut="ChangeColor('0','1')" onClick="CheckButton('0')">
40
<input type="submit" value="Stopp" name="STOPP" style="BackGround-Color: #FFFFFF; Width: 70px" onMouseOver="ChangeColor('1','0')" onMouseOut="ChangeColor('1','1')" onClick="CheckButton('1')"> 
41
<br>
42
<br>
43
<b>Geschwindigkeit:
44
<br>
45
<form method="get" action="gpio.php">
46
<input type="submit" value="Langsam" name="LANGSAM" style="BackGround-Color: #FFFFFF; Width: 70px" onMouseOver="ChangeColor('2','0')" onMouseOut="ChangeColor('2','1')" onClick="CheckButton('2')">
47
<input type="submit" value="Schnell" name="SCHNELL" style="BackGround-Color: #FFFFFF; Width: 70px" onMouseOver="ChangeColor('3','0')" onMouseOut="ChangeColor('3','1')" onClick="CheckButton('3')">
48
<br>
49
<br>
50
<b>Richtung:
51
<br>
52
<form method="get" action="gpio.php">
53
<input type="submit" value="Rechts" name="RECHTS" style="BackGround-Color: #FFFFFF; Width: 70px" onMouseOver="ChangeColor('4','0')" onMouseOut="ChangeColor('4','1')" onClick="CheckButton('4')">
54
<input type="submit" value="Links" name="LINKS"   style="BackGround-Color: #FFFFFF; Width: 70px" onMouseOver="ChangeColor('5','0')" onMouseOut="ChangeColor('5','1')" onClick="CheckButton('5')">
55

56

57

58
</form>
59

60
<?php
61
$modeon16 = trim(@shell_exec("/usr/local/bin/gpio -g mode 16 out"));
62
if(isset($_GET['START'])){
63
$val = trim(@shell_exec("/usr/local/bin/gpio -g write 16 1"));
64
}
65

66
else if(isset($_GET['STOPP'])){
67
$val = trim(@shell_exec("/usr/local/bin/gpio -g write 16 0"));
68
}
69

70
?>
71
</body>
72
</html>
73

74
</form>
75

76
<?php
77
$modeon12 = trim(@shell_exec("/usr/local/bin/gpio -g mode 12 out"));
78
if(isset($_GET['LANGSAM'])){
79
$val = trim(@shell_exec("/usr/local/bin/gpio -g write 12 1"));
80
}
81

82
else if(isset($_GET['SCHNELL'])){
83
$val = trim(@shell_exec("/usr/local/bin/gpio -g write 12 0"));
84
}
85
?>
86

87
</body>
88
</html>
89

90
</form>
91

92
<?php
93
$modeon20 = trim(@shell_exec("/usr/local/bin/gpio -g mode 20 out"));
94
if(isset($_GET['RECHTS'])){
95
$val = trim(@shell_exec("/usr/local/bin/gpio -g write 20 1"));
96
}
97

98
else if(isset($_GET['LANGSAM'])){
99
$val = trim(@shell_exec("/usr/local/bin/gpio -g write 20 0"));
100
}
101
?>
102
</body>
103
</html>
#4218938
Lesenswert?

Dieser Code hat mich wiedermal geschockt:
1) Im Code wird document.getElementsByName("START"); aufgerufen, BEVOR 
HTML-Elemente mit dem Namen "START" geparst wurden! Das gibt nur eine 
leere NodeList.
2) Es werden nur inline Styles statt CSS Klassen verwendet.
3) Du öffnest und schliesst 3-mal den html und body tag
4) Du Packst 3 Forms ineinander
5) Du hast hl statt h1 geschrieben
6) Du schliesst die b-Tags nicht (Das geht nur, weil eine Form ein Block 
Element ist und somit nicht in einem b Element sein kann, da dieses ein 
inline Element ist. Der Browser schliest dieses dann automatisch, ist 
aber nicht Standardkonform. )
Siehe auch: 
https://developer.mozilla.org/de/docs/Web/HTML/Block-level_elemente und 
Lern die Liste!
7) Du hast keinen <!DOCTYPE ! Sollen die Browser machen wozu auch immer 
diese gerade lust haben?
8) Dein JavaScript gehört in den <head>, nicht in den <body>

Aber sei beruhigt: ich habe schon schlimmeres gesehen. Du hast noch viel 
zu lernen, aber dass wird schon.

Antwort schreiben

Bitte melde dich an, um einen Beitrag zu schreiben.

oder

Mit Google-Account einloggen

Die Registrierung ist kostenlos und dauert nur eine Minute.

Jetzt registrieren