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

Marcus W. OP #4216637 
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>
Antwort Zitieren Bearbeiten Thread verschieben Thread sperren Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Melden Danke
Daniel A. #4218938 
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 Zitieren Bearbeiten Löschen Melden Danke
Guest Gast #4220896 
document.getElementById('MyID').disabled=true;
document.getElementById('MyID').disabled=false;

im Element:
<input type="button" id="MyId" style="........../>
Antwort Zitieren Bearbeiten Löschen Melden Danke
Thread beobachten

Antwort schreiben

Eine eigene Frage? Dieser Thread ist über 11 Jahre alt. Stell sie in einem eigenen Thread – dort lesen mehr Leute mit, und sie wird öfter und schneller beantwortet.

Neuen Thread starten

Eine Lösung, Ergänzung oder Rückmeldung zu diesem Thread? Dann antworte hier.

Formatierung
  • [c]C-Code[/c]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] – Link zu einem Artikel
  • Verweis auf einen anderen Beitrag: Rechtsklick auf dessen Beitrags-ID (#8078628), „Adresse kopieren“, in den Text einfügen

Mehr zur Formatierung

Längeren Sourcecode als Anhang, nicht in den Text. JPG nur für Fotos und Scans; Zeichnungen und Screenshots als PNG oder GIF. Siehe Bildformate.

Dein Name und deine E-Mail-Adresse

Schon registriert? Anmelden

Wird nicht angezeigt. Wir schicken dir einen Link; sobald du damit bestätigst, erscheint dein Beitrag.

Mit dem Abschicken legst du einen kostenlosen Account an und erkennst die Nutzungsbedingungen und die Datenschutzerklärung an.