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


[html,JavaScript] submit-Button: Funktion & Verknüpfung
von Marcus W. (makkez)

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>


  


  



  

  
:
    Bearbeitet durch User
  

  


  

    Beitrag melden Bearbeiten Thread verschieben Thread sperren Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Markierten Text zitieren Antwort Antwort mit Zitat
  







      

      



  

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


  

    

      von
      
        Jay (Gast)
      
      


      
    


    

      
    

    

    

  
  


  

  Lesenswert?
  

  •
  
  ▲  
  

  ▼  
  		
  

  


  

      
Du meinst offensichtlich JavaScript nicht Java. Es hilft schon zu wissen 
mit welcher Programmiersprache man eigentlich arbeitet.

  


  




  

    Beitrag melden Bearbeiten Löschen Markierten Text zitieren Antwort Antwort mit Zitat
  







      

      



  

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


  

    

      von
      
        Marcus W.
        (makkez)
        
      
      


      
    


    

      
    

    

    

  
  


  

  Lesenswert?
  

  •
  
  ▲  
  

  ▼  
  		
  

  


  

      
Sorry, habs vergessen

  


  




  

    Beitrag melden Bearbeiten Löschen Markierten Text zitieren Antwort Antwort mit Zitat
  







      

      



  

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


  

    

      von
      
        Daniel A.
        (daniel-a)
        
      
      


      
    


    

      
    

    

    

  
  


  

  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.

  


  



  

  
:
    Bearbeitet durch User
  

  


  

    Beitrag melden Bearbeiten Löschen Markierten Text zitieren Antwort Antwort mit Zitat
  







      

      



  

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


  

    

      von
      
        Guest (Gast)
      
      


      
    


    

      
    

    

    

  
  


  

  Lesenswert?
  

  •
  
  ▲  
  

  ▼  
  		
  

  


  

      
document.getElementById('MyID').disabled=true;
document.getElementById('MyID').disabled=false;

im Element:
<input type="button" id="MyId" style="........../>

  


  




  

    Beitrag melden Bearbeiten Löschen Markierten Text zitieren Antwort Antwort mit Zitat
  








    

    

       Thread beobachten

      |
         Seitenaufteilung abschalten

    

        


Bitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.



  Bestehender Account

  


  
  

  
    

      

        
          
        
        
          
        
      

      

        
          
        
        
          
        
      

    


    
    
    





  Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!

  Mit Google-Account einloggen
  





  Noch kein Account? Hier anmelden.