mercredi 2 février 2022

Check and uncheck checkboxes with a button in js

My goal is that the "kampfende" button resets the checkboxes under the id "aktionspunkte". I have read that a reset function doesn't work with checkboxes, thats why I tried it with if/else, but there is nothing happening at the moment.

A little bit more about the code: The button "Nächste Runde" tells the user to add 3 ap to the current ones and sets the "Kamprunden"-counter +1. That works totally fine. The "kampfende" button resets the "Kampfrunde"-counter, that works fine aswell.

Im not sure if I can build the if-else into the reset function and also if I can write two functions for one button.

Would be nice if you can help me!

current code:

                  var kampfrundencounter = (function() {
                    var runde = 1;
                    return function(reset = false) {
                      runde = reset ? 1 : runde + 1
                      return runde;
                    }
                  })();
                  function rundeErhöhen() {
                    document.getElementById("kampfrundencounter").innerHTML = kampfrundencounter();
                    alert("Füge 3 Aktionspunkte zu deinen hinzu");
                  }

                  function reset() {
                    document.getElementById("kampfrundencounter").innerHTML = kampfrundencounter(true);
                    //maybe here the if-else-part like: if the ap1- checkbox is uncheck then check it, if the ap2 checkbox is uncheck then check it, ...., if the ap5 is checked then uncheck it, ....

                  }

                
<div id = "Aktionspunkte"> <!--AKtionspunkte + Checkboxen-->
            <input type="checkbox" name="aktionspunkt" id="ap1" checked>
            <input type="checkbox" name="aktionspunkt" id="ap2" checked>
            <input type="checkbox" name="aktionspunkt" id="ap3" checked>
            <input type="checkbox" name="aktionspunkt" id="ap4" checked>
            <input type="checkbox" name="aktionspunkt" id="ap5">
            <input type="checkbox" name="aktionspunkt" id="ap6">
            <input type="checkbox" name="aktionspunkt" id="ap7">
            <input type="checkbox" name="aktionspunkt" id="ap8">
        </div>
        <div> <!--Kamprundencounter-->
            <button type="button" id="neueRunde" onclick="rundeErhöhen()">Nächste Runde</button>
            <button type="button" id="kampfende" onclick="reset()">Kampfende</button>
            <p>Aktuelle Runde: <a id="kampfrundencounter">1</a> </p>


        </div>



Aucun commentaire:

Enregistrer un commentaire