JeBubing: Checkbock + Berechnung in Java Skript

SELF-Forum

Checkbock + Berechnung in Java Skript

JeBubing
– Informationen zu den Bewertungsregeln

Hallo,

ich bin neu hier, habe relativ wenig Erfahrung und benötige eure Hilfe.

Ich möchte auf einer Webseite mehre Checkboxen verwenden. Jeder Checkbox soll eine Zahlenwert haben. Je nachdem welche Checkboxen angewählt sind, sollen die hinterlegten Werte Addiert werden. Könnte mir jemand Helfen, wie man das am besten Umsetzt?

Vielen Dank! Gruß Jens

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Checkbock + Berechnung in Java Skript

    Henry
    – Informationen zu den Bewertungsregeln

    Hallo JeBubing,

    Könnte mir jemand Helfen, wie man das am besten Umsetzt?

    Die Frage ist, warum Checkbox? Und wie/wo soll die Ausgabe erfolgen? Will damit sagen, ein wenig Code/Html wäre hilfreich um zu wissen, was genau du vorhast.

    Grundsätzlich sind mathematische Ausführungen mit Javascript kein Problem. Da findest du genügend Beispiel im Netz.

    zb.

    Mit Testbeispielen
    https://www.mediaevent.de/javascript/berechnung.html

    Leider ohne Testbeispiele (soweit ich das sehe) https://wiki.selfhtml.org/wiki/JavaScript/Operatoren/Rechenoperatoren

    Gruss
    Henry

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Checkbock + Berechnung in Java Skript

    Matthias Apsel Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo JeBubing,

    Ich möchte auf einer Webseite mehre Checkboxen verwenden. Jeder Checkbox soll eine Zahlenwert haben. Je nachdem welche Checkboxen angewählt sind, sollen die hinterlegten Werte Addiert werden.

    Mir scheint, das ist schon ein Lösungsversuch. Weiter scheint mir, dass das nicht wirklich zielführend sein wird.

    Beschreibe bitte, was du wirklich erreichen möchtest.

    Bis demnächst
    Matthias

    --
    Rosen sind rot.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  3. Checkbock + Berechnung in Java Skript

    1unitedpower
    +1 Informationen zu den Bewertungsregeln

    Vielleicht hilft dir ja dieses reduzierte Beispiel weiter https://jsfiddle.net/bhj67z4g/1/

    <input type="checkbox" value="4">
<input type="checkbox" value="2">
<input type="checkbox" value="1">
<output>0</output>

    const inputs = [...document.querySelectorAll('input')];
const output = document.querySelector('output');

inputs.forEach(input => {
	input.addEventListener('change', update);
});

function update () {
   output.textContent = inputs.reduce((sum, input) => {
   		return sum + (input.checked ? Number(input.value) : 0);
   }, 0);
}
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. Checkbock + Berechnung in Java Skript

      Gunnar Bittersmann Homepage des Autors (Versionen)
      +1 Informationen zu den Bewertungsregeln

      @@1unitedpower

      Vielleicht hilft dir ja dieses reduzierte Beispiel weiter

      Ich bin mir nicht sicher, ob Beipiele in ES6 (mit ... und =>) einem Anfänger weiterhelfen.

      Ich bin mir aber sicher, dass man Beispiele nicht so weit reduzieren darf, dass Eingabefelder keine Beschriftung haben.

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      Beitrag melden
      +1
      Informationen zu den Bewertungsregeln

      1. Checkbock + Berechnung in Java Skript

        JeBubing
        – Informationen zu den Bewertungsregeln

        Hallo, vielen dank für eure Bemühung. Ich werde mal mein Problem/Vorhaben genauer beschreiben.

        Ich bin am erstellen eine Webseite die auf einer Siemens CPU betrieben wird. Mit dieser Webseite soll über AWP Anweisungen, auf Variablen in der CPU zugegriffen werden und die auch beschrieben werden. Ich habe eine Variable die mit einer Binärcodeadresse .

        Auf der Webseite möchte ich 4 Checkboxen haben mit den Werten: 1, 2, 4, 8. Je nachdem welche Boxen angewählt werden diese Werte Addiert um ein Binäradresse zu erhalten. BSP: Checkbox 1+4 gewähl = Code 9. Dieser wert soll dann in die Variable der CPU geschrieben werden.

        Schön wäre auch den weg anders herum zu machen. Beim öffnen der Seite wird die Variable gelsen und die entsprechenden Boxen vorselektiert. z.B Variable aus CPU ist auf 7, auf der Webseite wird automatisch Box 1+2+3 angewähl.

        Der Button "Load new Configuaraion", soll den neune Wert auf die Variable senden.

        Ich hoffe es ist verständlich.

        Hier ist mal noch mein Code Entwurf. Wobei das Javascript bisher nur alle werte zusammenrechnet. Dies war nur ein versuch um irgendwie eine Lösung zu finden^^

        Ich glaub auch der Befehl "onclick" ist nicht optimal.

        Vielen dank für eure Hilfe.

        
<!-- AWP_In_Variable Name='"CIPCONF".CR69_SlaveMode[1]' -->
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<form>
<input name="Mode1_1" id="Mode1_1" value="1" type="checkbox" onClick="Mode1();"/>
<input name="Mode1_2" id="Mode1_2" value="2" type="checkbox" onClick="Mode1();" />
<input name="Mode1_3" id="Mode1_3" value="4" type="checkbox" onClick="Mode1();" />
<input name="Mode1_4" id="Mode1_4" value="8" type="checkbox" onClick="Mode1();" />

<input type="text"  id="SlaveMode1" name='"CIPCONF".CR69_SlaveMode[1]' value=":="CIPCONF".CR69_SlaveMode[1]:" size="2" style="width: 100px"/>

<input type="submit" value="Load new Configuration" />
</form>

<script type="text/javascript">
var Mode1_2 = parseInt(document.getElementById("Mode1_2").value);	
var Mode1_3 = parseInt(document.getElementById("Mode1_3").value);	
var Mode1_4 = parseInt(document.getElementById("Mode1_4").value);	
var Mode1 = Mode1_1+Mode1_2+Mode1_3+Mode1_4; */
function Mode1() {document.getElementById("SlaveMode1").value=Mode1;}

</script>
</body>

</html>


`
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Checkbock + Berechnung in Java Skript

          Rolf ẞ
          – Informationen zu den Bewertungsregeln

          Hallo JeBubing,

          ich habe ja KEINE Ahnung von Simatic und was man da so alles anstellen kann, aber eins glaube ich begriffen zu haben: Du kannst auf der CPU einen Webserver laufen lassen und der liefert an einen beliebigen Browser HTML aus. Und über bestimmte Namen von input Elementen kann man Werte zurückschreiben. Und Du brauchst einen Helper, der Dir eine binäre Eingabe eines Integer-Wertes ermöglicht. Serverseitig hast Du keine Chance, da die Simatic das alles intern handelt.

          Ideen dazu:

          • das eigentliche Input-Feld verstecken (type=hidden)
          • sicherstellen, dass der user erkennen kann, welche checkbox welchen bitwert darstellt
          • am ENDE der HTML Seite einen Javascript-Block setzen, der folgendes tut:
          1. Wert aus dem Inputfeld auslesen (der dürfte da als Integer stehen)
          2. Bits auf die Checkboxen verteilen
          3. Die Checkboxen so benennen, dass ihre Bitposition oder ihr Bitwert in ihrem Namen codiert ist (z.B. cb0, cb1, cb2, cb3)
          4. mit addEventListener('change', function(){...}) einen Event-Handler für das change-Event auf dem Container registrieren (nicht pro Checkbox)
          5. in der Eventhandler-Funktion die Bits wieder einsammeln und ins versteckte Inputfeld schreiben.

          Statt auf Change kann man sich auch auf das Submit des Form registrieren. In der Change-Variante kannst Du das Feld zum Testen sichtbar lassen und gucken, wie die Boxen sich auswirken.

          Zerlegen in Bits - dafür gibt's verschiedene Möglichkeiten. Wenn die Checkboxen so wie oben beschrieben benannt sind, geht es z.B. so:

          var wert = parseInt( /* wert des textfeldes */ );
for (var pos = 0; pos < 4; pos++) {
   document.getElementById("cb"+pos).checked = Boolean(wert % 2);
   wert >>= 1;   // Shift-right um 1 ist Integer-Division durch 2
}

          Im change-Eventhandler machst Du es andersrum, du gehst die Checkboxen durch und addierst die Values auf. Das hast Du ja im Prinzip schon. So würde ich es machen:

          var wert = 0;
for (var pos = 3; pos >= 0; pos--) {
   wert *= 2;
   wert += (document.getElementById("cb"+pos).checked) ? 1 : 0;
}
// jetzt Wert ins eigentliche Eingabefeld schreiben

          Rolf

          --
          Dosen sind silbern
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Checkbock + Berechnung in Java Skript

            JeBubing
            – Informationen zu den Bewertungsregeln

            Hallo,

            du hast es fast komplett richtig erfasst. Das Input Feld kann sichtbar bleiben. Der Wert aus der CPU ist ein Word somit in Hexadezimal.

            Leider klappt es bei mir immernoch nicht:( Ich habe im HTML folgendes erstellt.

            <input name="CB1" id="Mode1_1" value="1" type="checkbox" onclick="Mode1()"/>
<input name="CB2" value="2" type="checkbox" onClick="Mode1()" />
<input name="CB3" value="4" type="checkbox" onClick="Mode1()"/>
<input name="CB4" value="8" type="checkbox" onClick="Mode1()"/>

<input type="text"  id="SlaveMode1" name='"CIPCONF".CR69_SlaveMode[1]'  size="2" style="width: 100px"/>

            Ich habe als "eingangswert" mal ein Festwert gesetz, zum Fehlerquellen ausschließen.

            var wert = 9;
for (var pos = 0; pos < 4; pos++) {document.getElementById("CB"+pos).checked = Boolean(wert % 2);wert >>= 1;}

var wert = 0;
for (var pos = 3; pos >= 0; pos--) {
   wert *= 2;
   wert += (document.getElementById("cb"+pos).checked) ? 1 : 0;
}
function Mode1() {document.getElementById("SlaveMode1").value= wert;}

            Vielleicht kannst du mir nochmal weiterhelfen. Ich bin einfach am verzweifeln:D😂

            Vielen dank!

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Checkbock + Berechnung in Java Skript

              Rolf ẞ
              +1 Informationen zu den Bewertungsregeln

              Hallo JeBubing,

              ich weiß gar nicht, wo ich anfangen soll…

              1. Du hast den typischen "um 1 daneben" Fehler drin: Deine Elemente sind von 1-4 nummeriert aber deine Schleife läuft von 0-3
              2. name und id sind unterschiedliche Dinge, du kannst mit getElementById("CB"+pos) nicht etwas finden, dass name="CB1" hat. Gib den Checkboxen die IDs Mode1_0 bis Mode1_3, dann ist der +1 Fehler weg und du findest die Checkboxen auch.
              3. Die Übersetzung Checkboxen->Wert musst Du innerhalb der Mode1() Funktion unterbringen, sonst wird sie bei Klick nicht ausgeführt.

              Rolf

              --
              Dosen sind silbern
              Beitrag melden
              +1
              Informationen zu den Bewertungsregeln

              1. Checkbock + Berechnung in Java Skript

                Rolf ẞ (Versionen)
                +1 Informationen zu den Bewertungsregeln

                Ein Nachtrag…

                wenn dich eine Darstellung mit aktuellerem Javascript interessiert, dann guck mal hier:

                https://jsfiddle.net/yy5t7602/

                Auf brandaktuelle Elemente wie Pfeilfunktionen und let-Variablen habe ich verzichtet.

                Es ist alles so aufgeteilt, dass Du ohne Code-Wiederholungen mehrere Bitschalter-Eingaben auf einer Seite haben kannst, und ich verzichte auf die Notwendigkeit von Namenskonventionen für IDs. Statt dessen verwende ich nur die Checkbox-Values; allerdings geht die preSelect Funktion davon aus, dass die Checkboxen mit Values nach Größe absteigend geordnet sind.

                Der Code geht auch davon aus, dass er entweder am Ende des body steht oder in einem DOM ready-Handler (z.B. DOMContentLoaded) läuft.

                Rolf

                --
                Dosen sind silbern
                Beitrag melden
                +1
                Informationen zu den Bewertungsregeln

  4. Checkbock + Berechnung in Java Skript

    at
    – Informationen zu den Bewertungsregeln

    Hallo JeBubing,

    wozu Javascript?

    <h1>Hobbies</h1>
<p><input id="a" type="checkbox" value="1"><label for="a">HTML</label></p>
<p><input id="b" type="checkbox" value="1"><label for="b">CSS</label></p>
<p><input id="c" type="checkbox" value="-3"><label for="c">Katzenbabies töten</label></p>
<p><strong id="ergebnis">Karma-Punkte:</strong></p>

    … in Verbindung mit …

    body {
  counter-reset: karma;
}        
#a:checked {
  counter-increment: karma 1;
}        
#b:checked {
  counter-increment: karma 1;
}
#c:checked {
  counter-increment: karma -3;
}
#ergebnis::after {
  content: ' ' counter(karma);
}

    Und sobald die Browser die attr()-Funktion nicht nur als Wert der content-Eigenschaft kennen, kann man damit die value-Attribute auch direkt auslesen.

    MfG, at

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Checkbock + Berechnung in Java Skript

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@at

      <h1>Hobbies</h1>
<p><input id="a" type="checkbox" value="1"><label for="a">HTML</label></p>
<p><input id="b" type="checkbox" value="1"><label for="b">CSS</label></p>
<p><input id="c" type="checkbox" value="-3"><label for="c">Katzenbabies töten</label></p>
<p><strong id="ergebnis">Karma-Punkte:</strong></p>

      Was ich auch mache, ich komme nicht über −1. 🙀 Schlechtes Karma‽

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Checkbock + Berechnung in Java Skript

        at
        – Informationen zu den Bewertungsregeln

        Hallo Gunnar.

        Was ich auch mache, ich komme nicht über −1. 🙀 Schlechtes Karma‽

        Bei dir kann das natürlich nur am Browser liegen – böser Browser!

        MfG, at

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln