znarf: document.getElementById

Ich bin Neuling bei JavaScript und habe das folgende Problem, zu dem ich noch keine Lösung gefunden habe:

for (var i = 0; i < Dia.length; ++i){

Dia[i] = new Array(Bild_Anz);

Dia[i][j] = new Image();
         var x = j + i + 1;
         Dia[i][j].src = "Grafik/Bilder_1/BildName-" + x + ".jpg";
document.getElementById("Dia_" + x).src = Dia[i][j].src;
}

Die obrige Funktion greift nicht auf das Element ("Dia_" + x) zu, ich habe es auch schon mit ('Dia_' + x) probiert.

Gebe ich das Ziel direkt ein:

document.getElementById("Dia_1").src = Dia[0][j].src;

dann funktioniert die Funktion. Doch ich möchte sie variabel gestalten.

Wer kann mir helfen? Vielen Dank im voraus.

Znarf

  1. Tach,

    Ich bin Neuling bei JavaScript und habe das folgende Problem, zu dem ich noch keine Lösung gefunden habe:

    steht in den verwendeten Variablen das drin, was du denkst, dass es tut? Was sagt die Fehlerkonsole?

    for (var i = 0; i < Dia.length; ++i){

    Dia[i] = new Array(Bild_Anz);

    Dia[i][j] = new Image();
             var x = j + i + 1;
             Dia[i][j].src = "Grafik/Bilder_1/BildName-" + x + ".jpg";
    document.getElementById("Dia_" + x).src = Dia[i][j].src;
    }

    Der Quelltext ist nicht vollständig, mindestens j ist nicht definiert.

    mfg
    Woodfighter

    1. Okay, habe nicht daran gedacht den vollständigen Quellcode zu kopieren. Hier ist er:

      var Bild_Anz = 41;
      var max_Bild_Anz = Bild_Anz -7;
      var Dia_Anz = 7;

      var j = 0;
      var Dia = new Array(Dia_Anz);

      window.setInterval("ArrayDia()",2000);

      function ArrayDia() {

      if (j > max_Bild_Anz)
              j = 0;

      for (var i = 0; i < Dia.length; ++i){

      Dia[i] = new Array(Bild_Anz);

      Dia[i][j] = new Image();
               var x = j + i + 1;
      Dia[i][j].src = "Grafik/Bilder_1/BildName-" + x + ".jpg";
      // document.getElementById("Dia_" + x).src = Dia[i][j].src;
      }

      	document.getElementById("Dia\_7").src = Dia[0][j].src;  
      	document.getElementById("Dia\_6").src = Dia[1][j].src;  
      	document.getElementById("Dia\_5").src = Dia[2][j].src;  
      	document.getElementById("Dia\_4").src = Dia[3][j].src;  
      	document.getElementById("Dia\_3").src = Dia[4][j].src;  
      	document.getElementById("Dia\_2").src = Dia[5][j].src;  
      	document.getElementById("Dia\_1").src = Dia[6][j].src;  
      		  
      	  
      		  
       j = j + 1;  
      

      }

      Danke für die schnelle Antwort!

      Znarf

      1. Hallo,

        var Bild_Anz = 41;
        var max_Bild_Anz = Bild_Anz -7;
        var Dia_Anz = 7;

        Wäre nicht folgendes sinnvoller?

        var Bild_Anz = 41;
        var Dia_Anz = 7;
        var max_Bild_Anz = Bild_Anz - Dia_Anz;

        window.setInterval("ArrayDia()",2000);

        function ArrayDia() {

        if (j > max_Bild_Anz)

        j darf also den Wert 34 annehmen

        j = 0;

        for (var i = 0; i < Dia.length; ++i){

        Dia[i] = new Array(Bild_Anz);

        Dia[i][j] = new Image();
                 var x = j + i + 1;

        Dein x wird nicht zwischen 1 und 7 liegen. Möglicherweise willst Du

        var x = (j + i) % 7 + 1

        verwenden, damit x gesichert Werte zwischen 1 und 7 annimmt.

           Dia[i][j].src = "Grafik/Bilder\_1/BildName-" + x + ".jpg";  
           // document.getElementById("Dia\_" + x).src = Dia[i][j].src;  
        

        }

        j = j + 1;
        }

        Es ist übrigens eine gute Idee, seinen Code zu kommentieren :-)
        Es ist eine gute Idee, potentiellen Helfern mitzuteilen, was man erwartet - und was man stattdessen bekommt.

        Freundliche Grüße

        Vinzenz

        1. Hallo Vinzenz,

          vielen Dank für die Hinweise, ich werde mich in Zukunft danach richten. Doch warum funktioniert die Wertübergabe mittels document.getElementById("Dia_" + x) nicht und bei direkter Angabe ("Dia_2") funktioniert es?

          Liebe Grüße

          znarf

          1. Tach,

            vielen Dank für die Hinweise, ich werde mich in Zukunft danach richten. Doch warum funktioniert die Wertübergabe mittels document.getElementById("Dia_" + x) nicht und bei direkter Angabe ("Dia_2") funktioniert es?

            weil 2 niemals 8 ist, dein x hingegen schon.

            mfg
            Woodfighter

            1. Danke!

              Znarf

        2. Hallo Vinzenz, habe ein wenig Nachsicht mit mir, das nächste Mal wird meine Anfrage klarer und korrekter ausfallen.  Im folgenden die kommentierten Funktion:

          // Geamtzahl der Bilder die angezeigt werden sollen
          var Bild_Anz = 40;
          // Geamtzahl der Diarahmen die angezeigt werden
          var Dia_Anz = 7;
          var max_Bild_Anz = Bild_Anz -Dia_Anz;

          var j = 0;

          //Array der Diarahmen
          var Dia = new Array(Dia_Anz);

          window.setInterval("ArrayDia()",2000);

          // Diashow mit 7 Anzeigerahmen

          function ArrayDia() {
               // ÄUSSERE SCHLEIFE: durchläuft die Anzahl der Bilder
              if (j > max_Bild_Anz)
                  j = 0;
          // INNERE SCHLEIFE:  Zuordnung der Bilder zu den Diarahmen
              for (var i = 0; i < Dia.length; ++i){
               //Array der Bilder
                   Dia[i] = new Array(Bild_Anz);

          Dia[i][j] = new Image();
                   var x = (j + i) % 7 + 1
          // Bildname erzeugen
          Dia[i][j].src = "Grafik/Bilder_1/BildName-" + x + ".jpg";
          // Bildname variabel an HTML Objekt "Dia_x" übergeben erzeugen
          document.getElementById("Dia_" + x).src = Dia[i][j].src;
          }

           j = j + 1;  
          

          }

          Was bedeutet eigentlich  %7?

          Liebe Grüße

          Znarf

          1. Tach,

            Was bedeutet eigentlich  %7?

            das ist der Modulo-Operator.

            mfg
            Woodfighter

          2. Hallo znarf,

            Was bedeutet eigentlich  %7?

            damit bietest du dem Hersteller des Browsers 7% aller deiner Einkünfte an, damit er (der Browser) beim Parsen deiner Seite Großzügigkeit walten lässt. Ich würde mehr bieten.

            Gruß, Jürgen

    2. Hier die dazugehörige HTML Datei:

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
      <html><head><title>Spuren von Franz Schubert</title>

      <script type="text/javascript" src="Bild.js"></script>

      </head><body>
                 <p>Test</p>
                  <img id="Dia_1" src="Grafik/Bilder_1/BildName-1.jpg" width="144" height="100" alt="Bild" >
                  <img id="Dia_2" src="Grafik/Bilder_1/BildName-2.jpg" width="144" height="100" alt="Bild" >
                  <img id="Dia_3" src="Grafik/Bilder_1/BildName-3.jpg" width="144" height="100" alt="Bild" >
                  <img id="Dia_4" src="Grafik/Bilder_1/BildName-4.jpg" width="144" height="100" alt="Bild" >
                  <img id="Dia_5" src="Grafik/Bilder_1/BildName-5.jpg" width="144" height="100" alt="Bild" >
                  <img id="Dia_6" src="Grafik/Bilder_1/BildName-6.jpg" width="144" height="100" alt="Bild" >
                  <img id="Dia_7" src="Grafik/Bilder_1/BildName-7.jpg" width="144" height="100" alt="Bild" >
      </body></html>

      Gruß Znarf