Ampeln Schalten

  • Hallo zusammen,

    ich habe das Ampel css-Tutorial durch gearbeitet und möchte die Ampeln durch Eingänge schalten.

    Dazu habe ich innerhalb einer html-Seite ein Script mit einer if-Abfrage eingefügt.

    Mit document.write kann ich die if-Abfrage gut durchspielen.

    Mein Problem ist jetzt, dass ich nicht weiß, wie ich den untenstehenden Quellcode innerhalb JavaScript aufrufe, dazu habe ich schon viele Möglichkeiten durchgespielt, die alle nicht zum Erfolg geführt haben.


    Vielen Dank für eure Tipps


    Code
    <span class="css-ampel ampelrot"><span></span></span>
  • Das heißt, dass ich an einem Raspberry Pi Sensoren angeschlossen haben und die quasie die Eingänge sind.

    Ist ein Sensorwert größer 0,1 -> Ampel grün

    Ist er kleiner -> Ampel rot.

    Das ist ein Versuch:

    Code
    <span class="css-ampel id="element""><span></span></span>
    
    <script>
    if ({{ X1 }} > 0.1) {
        document.getElementById("element").innerHTML = "ampelgruen";
    } else {
        document.getElementById("element").innerHTML = "ampelrot";
    }
    </script>


    Ein anderer, den ich so ähnlich im Internet gefunden habe, aber eher weniger verstehe:

  • Was willst du damit erreichen?

    Code
    document.getElementById("element").innerHTML = "ampelgruen";

    ich denke mal das du da eine Klasse zuweisen willst.

    Mit den Raspberry Pi Sensoren Kram kenne ich mich nicht aus, deswegen kann ich dir nur nee Möglichkeit zeigen wie man Else If benutzt und eine Klasse vergibt.

    * Link entfernt, weil existiert nicht mehr *

    Für dich sollte der Range Slider interessant sein.

    Man kann das auch mit add und remove class machen.


    Nur leider weiß ich nicht, ob das mit den Raspberry da auch alles so machbar ist, weil kenne mich damit gar nicht aus

  • Wenns nur um den Aufruf geht, dann würde ich einfach in deinem Javascript folgendes aufrufen:


    $('#ampel').addClass('ampelrot');


    Das XY muss ersetzt werden durch eine ID (habe ich schon erledigt - XY auf #ampel abgeändert). Bedeutet, du musst deinen span so aufbauen:


    Code
    <span id="ampel" class="css-ampel"></span>

    Dann hast du nämlich jetzt die Möglichkeit, dies via obigen Beispiel aufzurufen und ihm anschließend eine klasse (wahrscheinlich in deinem fall - ampelrot, ampelgelb, ampelgruen) zuzuweisen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!