Variablen außerhalb der Schleife nutzen

[Toeb]

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:

        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

[Christian Marquardt]

Siehe Beitrag #6

[Toeb]

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:

$(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 /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[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.

[Christian Marquardt]

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

[Toeb]

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:

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

$(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?

[Christian Marquardt]

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

[Toeb]

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.

[Christian Marquardt]

Sie außerhalb definieren

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