Beiträge von marja

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.

Hallo zusammen,

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

Hierzu möchte ich dynamische Variablen verwenden.

Original 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";}
                }

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

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

Ja, fertiger Code mag cool sein. Aber da lernt man nix - naja vielleicht ein bisschen.

Dank Eurer Hinweise/Tipps habe ich meine Lösung gefunden um OBJEKTE zu verstehen und auszulesen zu können

var dataset = el;
var scorewert = ""
        
const forEach = function (obj, fn) {
    for (const [ key, value ] of Object.entries(obj)) {
        fn(key, value);
                }
        };

forEach(dataset, (key, value) => {
    scorewert = scorewert + '\n ' + key + ': ' + value.toFixed(2) + ', \n\n '
        });

return scorewert

Zitat von Arne Drews

Ich werfe mal zusätzlich die Frage in den Raum, aus welcher Quelle die Daten kommen. Vom Aufbau her ist das weit entfernt von einem sinnvollem Konstrukt.

Wären die Namen tatsächlich ein Schlüssel wie bei JSON, müsste man über das Objekt iterieren, um an den Key und das Value zu kommen.

Sinnvoll in Form von JSON wäre es bspw. so

Code

{
   "data":[
      {
         "name":"Peter",
         "value":0.998
      },
      {
         "name":"Uwe",
         "value":0.872541254
      },
      {
         "name":"Beate",
         "value":0.72
      },
      {
         "name":"Maria-Diana",
         "value":0.854745
      }
   ]
}

Alles anzeigen

So iterierst Du über das Array data, weißt aber, dass Du in jedem Objektelement die Schlüssel name und value hast.

Getestet:

JavaScript

var dataset = '{"data":[{"name":"Peter","value":0.998},{"name":"Uwe","value":0.872541254},{"name":"Beate","value":0.72},{"name":"Maria-Diana","value":0.854745}]}';

(JSON.parse(dataset)).data.forEach( i => {
    console.log( i.name + ' has a value of ' + i.value.toString() );
});

Code: Ausgabe

Peter has a value of 0.998
Uwe has a value of 0.872541254
Beate has a value of 0.72
Maria-Diana has a value of 0.854745

Alles anzeigen

Damit kann ich glaube ich was anfangen. Cool und Danke für deinen Tip!!

Zitat von Sempervivum

Wenn ich mir den String ansehe, kommt mir der Verdacht, dass es JSON-kodierte Daten sind. Wo kommt der String denn her? Du ersetzt Anführungszeichen, die in deinem Beispiel nicht zu sehen sind. Kann es sein, dass dein String so aussieht:

Code

{"Peter": 0.998, "Uwe": 0.872541254, "Beate": 0.72, "Maria Dana": 0.854745}

Ja korrekt. Wie gesagt, ich bin in den Anfängen von json und co. Ich wollte diesen String in einer Schleife dann nutzerfreundlich also für den Endanwender zur Verfügung stellen. Die Daten hole ich aus einer MongoDB (kannte ich vorher noch nicht, kannte nur Oracle und Co.) Ich hole sie mit JSON.stringify(JSON.parse(.....)) Und nun versuche ich eben per learning by doing diesen leserlich aufzubereiten. Man freut sich immer dann wenn man durch Tipps was neues Geschäft hat

Viele Grüße

Marja

Hallo zusammen,

Nachdem mir gestern so schnell und cool geholfen wurde, habe ich da mal wieder ne Frage.

"Replace" kenne ich noch aus meinen VB.Net Zeiten.
Nun habe ich versucht, dass auch in html umzusetzen.

Ich habe Bsp. einen String mit folgendem Inhalt = {Peter: 0.998, Uwe: 0.872541254, Beate: 0.72, Maria Dana: 0.854745, ... }

Diesen möchte ich gerne aufbereiten/formatieren.

Also mal ne einfache Funktion gebastelt

function format_MyName(el) {
     var tmp = el
     var tmp = tmp.replace('{','') 'Entfernt die erste geschweifte Klammer
     var tmp = tmp.replace('}','') 'Entfernt die letzte geschweifte Klammer
     var tmp = tmp.replace(/['"]+/g, '') 'alle Gänsefüssen entfernen
     var tmp = tmp.replace(',','\n') 'alle Kommas durch einen Zeilenumbruch ersetzen
        return tmp
}

Die geschweiften Klammern und die Gänsefüsschen entfernt er. Leider ersetzt er nicht alle Kommas durch einen Zeilenumbruch.
Und dann suche ich nach einer Möglichkeit, dass er mir die Zahlenwerte wie folgt abschneidet. Nach dem Punkt sollen noch max. 3 Zahlen stehen ohne auf das runden zu achten.

Original: {Peter: 0.998, Uwe: 0.872541254, Beate: 0.72, Maria Dana: 0.854745, ... }
Ergebnis: Peter: 0.998 \n Uwe: 0.872 \n Beate: 0.72 \n Mario Dana: 0854

Vielen Dank
Marja

und wieder mal vielen Dank für Deine Hilfe.

Es hat mir nach meinem Post keine ruhe gelassen, Laptop war aus und ich habe per Smartphone gegoogelt und genau das gefunden was du mir gesagt hast mit der class. Also Laptop wieder eingeschaltet und TOP. Es funktioniert wunderbar!! Danke schön

Das mit der Class ist ja super einfach

figure {} kann ich das in der css Datei auch mehrfach definieren wie bei label {} ?

Hintergrund; label {} habe ich in der css Datei mehrfach definiert - Beispiel label span_text1 {} , label span_text2 {} etc. Das spreche ich in der html dann auch so an <span_text1></span_text1> und <span_text2></span_text2> was funktioniert. Bei figure pic1 {} in der css Datei funktioniert das nicht. Dadurch haben alle figure Container die gleichen Einstellungen wobei ich aber gerne die einen Bilder in einen 100x100px Container angezeigt haben möchte und die anderen Bilder im Dialog in dem Container 200x200px angezeigt haben möchte.

Grüße

Marja

schon gefunden Danke schön

Gruß

Marja

Danke schön

Mit dem figure-Tag habe ich nun etwas experimentiert. Aber wenn das Bild oder sonstiges größer ist als ich den figure-Tag definiert habe, geht es über den den figure-Tag?

figure {
  position: relative;
  margin: 0;
  padding: 10px;
  width: 200px;
  height: 200px;
  border: 1px solid gainsboro;
  background: white;
}

So etwas wie Scrollbalken gib es nicht im Container figure-Tag oder? Aber da Du mir den Tip gegeben hast - figure-Tag - werde ich mal weiter stöbern, so dass ich bsp. ein Container habe der 200px mal 200px ist und wenn das Bild größer ist, mir dann Scrollbalken angezeigt werden.

Update: overflow {} scheint das zu sein, was ich gesucht habe

Vielen Dank

Marja

Hallo zusammen,

Ich bin neu hier im Forum. Bisher habe ich mit Visual Basic .Net programmiert.

Vor sehr langer Zeit hatte ich auch mal Webseiten programmiert. Vor kurzem, auf Grund von Augmented Reality bin ich wieder mit Java, CSS und Co. in Berührung gekommen.

Nun bin ich gerade dabei, eine Website mit 1-4 Bilder, Checkboxen und Dropdown Felder zu erstellen. Die ist auch soweit fertig.

Nun werden die 1-4 Bilder, je nach Auswahl auf der Website angezeigt. Bei Klick auf das jeweilige Bild öffnet sich ein Dialog (Modal).

Dieses habe ich unterteilt in zwei Bereich. Links wird das Bild angezeigt, recht Informationen dazu.

Nun (es ist ja möglich das die Bilder unterschiedliche Größen haben) das das Bild in einem Rahmen (nehme ich div dazu?) propotional angezeigt wird.

Unter dem Bild befinden sich vier Button.
1. Button: 90° nach links

2. Button: 90° nach rechts

3. Button: Verkleinern

4. Button: Vergrößern

Nun habe ich gedacht, dass ich die Gradzahl als Variable definiere und bei jedem Klick, die Zahl sich um 90 erhöht, dadurch das Bild sich dreht. Aber so richtig funktioniert das nicht.

Google und Co. habe ich als Suche bereits genutzt, aber in Bezug auf Modal und drehen bzw. zoomen habe ich noch nichts gefunden.

Es wäre schön wenn ihr mir als Newcomer ein paar Tipps in die jeweilige Richtung geben könntet.

Nachtrag: das mit dem Bilder am Rahmen anpassen habe ich glaube ich gefunden: https://www.html-seminar.de/bilder-bei-responsive-design.htm

Viele Grüße

Marja