Dynamische Variable erstellen

marja · 29. August 2019

Hallo zusammen,

gerne möchte ich meinen Code in HTML anpassen/kürzen.

Hierzu möchte ich dynamische Variablen verwenden.

Original Code

Code

var modal1 = document.getElementById("myModal1");
var modal2 = document.getElementById("myModal2");
var modal3 = document.getElementById("myModal3");
var modal4 = document.getElementById("myModal4");
var btn1 = document.getElementById("Pic1");
var btn2 = document.getElementById("Pic2");
var btn3 = document.getElementById("Pic3");
var btn4 = document.getElementById("Pic4");
if (PicAmount ==1){
    btn1.onclick = function() {modal1.style.display = "block";}
                } else if (PicAmount ==2) {
                        btn1.onclick = function() {modal1.style.display = "block";}
                        btn2.onclick = function() {modal2.style.display = "block";}
                } else if (PicAmount ==3) {
                        btn1.onclick = function() {modal1.style.display = "block";}
                        btn2.onclick = function() {modal2.style.display = "block";}
                        btn3.onclick = function() {modal3.style.display = "block";}
                } else if (PicAmount ==4) {
                        btn1.onclick = function() {modal1.style.display = "block";}
                        btn2.onclick = function() {modal2.style.display = "block";}
                        btn3.onclick = function() {modal3.style.display = "block";}
                        btn4.onclick = function() {modal4.style.display = "block";}
                }

Alles anzeigen

Nun möchte ich das wie gesagt kürzen per Loop bin mir aber nicht sicher wie ich am besten vorgehe, denn '+i+' funktioniert ja nur bei einem String. Das heißt ich müsste die Variable in ein String umwandeln?

Mein bisherige Idee

Code

var btn_i;
                for (btn_i = 1; btn_i < PicAmount; btn_i++){
                        var modal1 = document.getElementById("myModal"+btn_i);
                        var btn1 = document.getElementById("Pic"+btn_i);

                        btn1.onclick = function() {modal1.style.display = "block";}
                }

Das heißt, ich müsste modal1, btn1 auch noch irgendwie variable gestalten ... weiß aber nicht genau wie.

Ich hoffe auf Eure Hilfe, Tipps

Gruß

Marja

basti1012 · 29. August 2019

brauchst du die Variabeln noch mal später im code ?

Weil sonst geht das auch einfacher.

Edit:

Obwohl, kommt drauf an .

Wozu ist "PicAmount" ?

Weil du ja in den if mal nur 2 oder 3 usw modals sichtbar machst

Sempervivum · 29. August 2019

Zitat

Wozu ist "PicAmount" ?

Das ist mir auch unklar.

Ich bin der Meinung, dass dein Code mit der Schleife funktionieren sollte. Um Missverständnisse zu vermeiden, würde ich nur das "1" bei den Variablennamen weg lassen:

Code

                var btn_i;
                for (btn_i = 1; btn_i < PicAmount; btn_i++){
                        var modal = document.getElementById("myModal"+btn_i);
                        var btn = document.getElementById("Pic"+btn_i);
                        btn.onclick = function() {modal.style.display = "block";}
                }

denn diese Variablen enthalten ja bei jedem Schleifendurchlauf einen anderen Button/Modal.

basti1012 · 29. August 2019

Ah du wahrst schon schneller.

Meine Schleife sieht so aus

Code

var PicAmount=3;
butto=document.getElementById('Pic'+PicAmount);
modals=document.querySelectorAll('.mod');
butto.addEventListener('click',function(){
            for(a=0;a<PicAmount;a++){
                modals[a].style.display = "block";
            }
})

Da ihr Code mal 1 oder alle 4 Modale anklickbar sind hatte ich das so gedacht.

An besten wäre wenn man das mal sehen könnte was oder wozu ihr Code ist , dann wäre es einfacher.

Ich denke ehr das es zu sempervivums Code geht weil es ja sinvoller wäre mit 4 buttons jeweils ein modal zu öffnen .

Die PicAmout if Abfragen würde ich zb in Foren einbauen oder so . if PicAmout=1 wird nur ein Modal freigegeben was besucher öffnet , bei 2 nur Modals was Angemeldete User sehen können und alle 4 halt der Admin der sieht alles

marja · 4. September 2019

Zitat von basti1012

brauchst du die Variabeln noch mal später im code ?

Weil sonst geht das auch einfacher.

Edit:

Obwohl, kommt drauf an .

Wozu ist "PicAmount" ?

Weil du ja in den if mal nur 2 oder 3 usw modals sichtbar machst

Alles anzeigen

Sorry für die späte Antwort.

PicAmount ist ein Variable in der die Anzahl der downgeladenen Bilder gespeichert werden. Der User kann zwischen 1-4 Bilder herunterladen, die ihm dann visuell auf der Page nebeneinander angezeigt werden.

Dynamische Variable erstellen

Jetzt mitmachen!

Teilen