submit-Button: Funktion & Verknüpfung

  • 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:


    Edited once, last by Turael ().

  • Was genau ist nun die Frage?


    Einen Button kannst du über das Attribut disabled deaktivieren.


    Beispiel:


    Code
    <button role="button" disabled="disabled">Nicht anklickbar</button>


    Siehe https://developer.mozilla.org/…s/Web/HTML/Element/button
    Geht natürlich auch mit Input-Feldern die Buttons sind.


    In Javascript setzt du dieses Attribut wie folgt für ein Button:


    Code
    playbutton = document.querySelector(".js-button-play");
    playbutton.setAttribute('disabled', 'disabled');


    siehe https://developer.mozilla.org/…/API/Element/setAttribute

  • Die Frage ist, wie der Code erweitert werden muss.
    Nach der Auswahl einer Richtung und dem Start Button, soll genau in dem Moment der andere Richtungs-Button inaktiv sein.
    Erst nach Auswahl des Stopp-Buttons, sollen beide Richtungs-Buttons wieder aktiv sein.