Announcement

Collapse
No announcement yet.

Variablen außerhalb der Schleife nutzen

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Variablen außerhalb der Schleife nutzen

    Hallo zusammen,

    ich habe eine kleine Abfrage in einer for-Schleife und definiere dort eine Variable.
    Wenn die for-Schleife abgeschlossen ist, möchte ich mit dieser Variable weiterarbeiten.

    Leider ist die Variable nur innerhalb der Schleife gültig und nicht außerhalb. Ich habe das mit einem alert getestet.
    Die Ausgabe erfolgt nur innerhalb der Schleife.

    Wie kriege ich das hin, dass ich außerhalb der Schleife mit der Variable weiterarbeiten kann?

    Hier der Code:

    Code:
            var schritt;
    
            for (schritt = 1; schritt < 6; schritt++) {
    
            var id_radio = "radio"+schritt;
    
                if (document.getElementById(id_radio).checked == true) {
                    radio_val = Number($('#'+id_radio+'').val());
    
                } 
            }
    
            alert(radio_val);
    Liebe Grüße, Toeb

  • #2
    Sie außerhalb definieren

    var schritt;
    var id_radio ;
    for (schritt = 1; schritt < 6; schritt++) {
    id_radio = "radio"+schritt;


    Christian

    Comment


    • #3
      Ich meine die Variable radio_val
      Reicht es dort auch, sie außerhalb zu definieren? Sie wird ja in der Schleife zusammengesetzt. Und diese zusammengesetzte Variable benötige ich dann.

      Und danke für die Antwort, du scheinst ja gut im Thema zu sein und auch sehr aktiv hier. Freut mich und kann ich empfehlen.

      Comment


      • #4
        Dann ist diese ebenfalls außerhalb zu definieren. Sie hat dann natürlich nach dem Ende der Schleife nur den letzten Stand
        Christian

        Comment


        • #5
          Vielen Dank.

          Ich habe noch ein etwas komplizierteres Problem, wenn dir dafür auch eine Lösung einfällt wäre das Klasse. Ich habe die Befürchtung langsam zu nerven.

          Es geht um folgendes, ich habe ein universelles Script welches im head integriert ist, mit dem ich auf verschiedensten Seiten modale Dialoge öffnen kann. Das funktioniert auch super.
          Auf einer Seite jedoch, soll bevor sich das Dialogfeld öffnet eine eine validation von Formularfeldern gemacht werden.

          Ich bekomme es nicht hin, dass der trigger für das modal-dialog unterbrochen wird. Ich hoffe es ist verständlich. Dazu mal etwas Code.
          Folgendes Formular (gekürzt:
          Code:
                <form method="post" class="form-prof">
                      <div class="form-group">
                          <label for="inputPasswort" class="col-sm-2 control-label text-w3">Passwort</label>
                          <div class="bl3 mr3">
                              <input class="form-prof-control" id="inputPasswort" name="passwort" type="password" required>
                          </div>
                      </div>                    
                      <div class="form-group">
                          <div class="fb-jc-c fb2 text-w3">
                            <button type="submit" class="form-prof-send" id="change-email" data-modal-target="modal3">Speichern</button>
                          </div>
                      </div>
                  </form>
          dazu habe ich folgendes Script (auch gekürzt):

          Code:
          $(document).ready(function() { 
          
              const modalTriggerButtons = document.querySelectorAll("[data-modal-target]");
              const modals = document.querySelectorAll(".modals");
              const modalCloseButtons = document.querySelectorAll(".modals-head-right");
              modalTriggerButtons.forEach(elem => {
                  elem.addEventListener("click", event => toggleModal(event.currentTarget.getAttribute("data-modal-target")));
              });
              modalCloseButtons.forEach(elem => {
                  elem.addEventListener("click", event => toggleModal(event.currentTarget.closest(".modals").id));
              });
              modals.forEach(elem => {
                  elem.addEventListener("click", event => {
                      if(event.currentTarget === event.target) toggleModal(event.currentTarget.id);
                      });
              });
          
          });
          Jetzt wird mir der Dialog natürlich jedesmal geöffnet, wenn ich auf den Submit-Button klicke.
          Ich wollte vorher jetzt noch eine Validierung machen, erst wenn diese gültig ist, soll der Dialog geöffnet werden.
          Und das Script soll auch noch von anderen Seiten genutzt werden können, ohne Validierung.

          Ich dachte ich kann einfach eine Abfrage über das Inputfeld einfügen z.B. so:


          $('#change-email').click(function () {
          var passwort = String($('#inputPasswort').val());

          if (passwort == "") {

          alert("Bitte geben Sie ihr Passwort ein");
          exit();

          }
          });
          Diese Abfrage irgendwie davor basteln und dafür sorgen, dass einfach das komplette Script anschließend nicht mehr genutzt wird. Leider funktioniert es nicht.
          Gibt es da eine Lösung?

          Comment


          • #6
            Ich verstehe die Frage nicht.

            "dass einfach das komplette Script anschließend nicht mehr genutzt wird"???

            Deine eingefügt Funktion zur Validierung reagiert nur auf einen Klick

            Das hier als Funktion

            function testeInput{
            var passwort = String($('#inputPasswort').val());
            if (passwort == "") {
            alert("Bitte geben Sie ihr Passwort ein");
            }

            kann in eine extra Javascriptdatei gelegt werden und muss dann vor deiner Datei eingebunden werden.
            In deinem aktuellen Javascript kannst du über
            var x = location.href;
            die akutelle Seite abfragen. Dann führst du die obige Funktion in der extra Datei nur dann aus, wenn du auf der gewünschten Seite bist

            Alternativ kannst du prüfen, ob das Element $('#inputPasswort') vorhanden ist und nur dann den Code ausführen. Ein Auslagerung ist dann nicht erforderlich
            Zuletzt editiert von Christian Marquardt; 23.10.2021, 13:31.
            Christian

            Comment


            • #7
              Ojeoje,

              ich habe es jetzt hinbekommen wie gewünscht, indem ich nach erfolgreicher Validierung eine modifizierte Version des Toggle-Codes eingefügt habe. Dafür habe ich jetzt ein anderes Problem, mit den ursprünglichen Seiten, ich beschreibe es nach dem Code!

              Es sieht so aus:



              Code:
              $(document).ready(function() {  
                  const modal3 = document.getElementById("modal3");
                  const form = document.getElementById('form-email');
                  const xxxxx = document.getElementById('xxxxx');
                  const xxxxx = document.getElementById('xxxxxx');
                  const xxxxx = document.getElementById('xxxxxx');
                  const messageContainer = document.getElementById("message-container");
              
              
              
                      form.addEventListener("click", function(event){
                          event.preventDefault()
              
                      checkInputs();
                      var passwort = String($('#inputPasswort').val());
                      var email = String($('#inputEmail').val());
                      var email2 = String($('#inputEmail2').val());
              
                          $.ajax({
                              url: 'xxxxxxx',
                              type: 'POST',
                              data: {passwort:passwort, email:email, email2:email2},
                              beforeSend:function(){
                                  $("#modals-content-load-email").html("<div class='fb-jc-c'><div class='lds-ripple'><div></div><div></div></div></div>");
                              },
                              success: function(data){
                                  setTimeout(function() {
                                      $('#modals-content-load-email').html(data);
                                  }, 500);
                              }       
                          })     
                  });
              
                  function checkInputs() {
                      // trim to remove the whitespaces
                      const passwordValue = password.value.trim();
                      const emailValue = email.value.trim();
                      const email2Value = email2.value.trim();
                      let cantoggle = true;
              
                      if(passwordValue === '') {
                          setErrorFor(password, 'Das Passwort muss eingetragen werden!');
                          cantoggle = false;
                      } /* else {
                          setSuccessFor(password);
                      } */
              
                      if(emailValue === '') {
                          setErrorFor(email, 'Die E-Mail Adresse muss eingetragen werden');
                          cantoggle = false;
                      } else if (!isEmail(emailValue)) {
                          setErrorFor(email, 'Keine gültige E-Mail Adresse');
                          cantoggle = false;
                      } /* else {
                          setSuccessFor(email);
                      } */
              
                      if(email2Value === '') {
                          setErrorFor(email, 'Die E-Mail Adresse muss eingetragen werden');
                          cantoggle = false;
                      } else if (!isEmail(email2Value)) {
                          setErrorFor(email, 'Keine gültige E-Mail Adresse');
                          cantoggle = false;
                      } /* else {
                          setSuccessFor(email);
                      } */
                      if(emailValue != email2Value) {
                          setErrorFor(email, 'Die E-Mail Adressen stimmen nicht überein!');
                          cantoggle = false;
                      } /* else {
                          setSuccessFor(email);
                      } */
              
                      if (cantoggle === true) {
                          toggleModalemail(modal3); 
                      }
              
                  }
              
                  function setErrorFor(input, message) {
                      const formControlParent = input.parentElement;
                      const formControl = input;
                      const small = formControlParent.querySelector('small');
                      formControl.classList.add("red-border");
                      small.className = 'err-msg';
                      small.innerText = message;
                  }
              
                /*   function setSuccessFor(input) {
                      const formControl = input.parentElement;
                      formControl.className = 'form-control success';
                  } */
              
                  function isEmail(email) {
                      return /^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
                  }    
              
              
                  function toggleModalemail(modalId) {
                      const modal = document.getElementById("modal3");
                      if(getComputedStyle(modal).display==="flex") { // alternatively: if(modal.classList.contains("modal-show"))
                          modal.classList.add("modal-hide");
                          setTimeout(() => {
                          document.body.style.overflow = "initial"; // Optional: in order to enable/disable page scrolling while modal is hidden/shown - in this case: "initial" <=> "visible"
                          modal.classList.remove("modal-show", "modal-hide");
                          modal.style.display = "none";      
                          }, 200);
                      }
                      else {
                          document.body.style.overflow = "hidden"; // Optional: in order to enable/disable page scrolling while modal is hidden/shown
                          modal.style.display = "flex";
                          modal.classList.add("modal-show");
                      }
                  }
              Es funktioniert alles, bloß auf den alten Seiten geht es jetzt nicht mehr. Dort existiert kein Formular, sondern nur ein Button der das Dialogfeld öffnet. Wenn ich darauf klicke, sagt mir die Konsole,
              dass form.addEventListener("click", function(event){event.preventDefault()... NULL ist, oder nicht definiert ist. Es existiert diese form überhaupt nicht auf der Seite, weshalb wird der EventListener überhaupt
              angesprochen? Kann ich das verhindern?

              Also kurz gesagt, der oben gepostete Code soll auf dieser Seite eigentlich komplett ignoriert werden.

              Comment


              • #8
                Siehe Beitrag #6
                Christian

                Comment

                Working...
                X