array in einer schleife ausgeben

Hard-Styler1 · 27 September 2008

wie kann ich ein array in einer schleife ausgeben ?

array zb so

PHP:

array    =  new Array(10); 
 
  array[0] = "bilder1.jpg"; 
  array[1] = "bilder2.jpg"; 
  array[2] = "bilder3.jpg"; 
  array[3] = "bilder4.jpg"; 
  array[4] = "bilder5.jpg"; 
  array[5] = "bilder6.jpg"; 
  array[6] = "bilder7.jpg"; 
  array[7] = "bilder8.jpg"; 
  array[8] = "bilder9.jpg"; 
  array[9] = "bilder10.jpg";

wie würde so eine schleife ausehen wen ich dan die bilder noch auf weite 100px und höhe 100px machen will und einen border da rein ?

lg

threadi · 27 September 2008

Antwort für 1. Frage: SELFHTML: JavaScript / Sprachelemente / Schleifen (while/for/do-while)

Antwort für 2. Frage: per CSS:

Code:

width: 100px;height: 100px;border: 1px solid #000000;

Hard-Styler1 · 27 September 2008

threadi schrieb:
Antwort für 1. Frage: SELFHTML: JavaScript / Sprachelemente / Schleifen (while/for/do-while)

warum gipst du mir ne verlinkung zum deutschen katoffelamt ? hilft mir genau so wenig ha´be selber 2 bücher und da gipts noch 10mal bessere als selfhtml im netz zb.

Galileo Computing :: JavaScript und AJAX – 4.3 Kontrollstrukturen: Schleifen

aber suche ein beispiel wie ich eina rray mit bilder ausgeben kann man so unverstentlich rede ich doch nicht

lg

threadi · 27 September 2008

Ich kopier dir das gerne mal zusammen ...

Code:

for (var i = 0; i < arrayname.length; i++)
Ausgabe = Ausgabe + '<img src="' + i + '" alt="">';
document.write(Ausgabe);

Hard-Styler1 · 27 September 2008

<html>
<head>
<title>Array</title>

<script language="javascript">

bilder = new Array(10);

array[0] = "bilder1.jpg";
array[1] = "bilder2.jpg";
array[2] = "bilder3.jpg";
array[3] = "bilder4.jpg";
array[4] = "bilder5.jpg";
array[5] = "bilder6.jpg";
array[6] = "bilder7.jpg";
array[7] = "bilder8.jpg";
array[8] = "bilder9.jpg";
array[9] = "bilder10.jpg";

for (var i = 0; i < bilder.length; i++)
Ausgabe = Ausgabe + '<img src="' + i + '" alt="">';
document.write(Ausgabe);

</script>
</head>

<body>
</body>
</html>

er gipt mir aber die 10 bilder so nicht aus ?

threadi · 27 September 2008

In deinem Fall müsstest Du das script komplett im body ausgeben lassen. Oder (besser) in eine Funktion stecken die aus dem body aufgerufen wird und dort die Rückgabe von return per document.write() ausgibt.

_Thor_ · 27 September 2008

Oder so, finde ich persönlich schöner, weil man das DOM manipuliert.

Code:

var fragment = document.createDocumentFragment();

for (var i in array) {
  var image = document.createElement('img');
  image.setAttribute('alt', array[i]);
  image.setAttribute('src', array[i]);
  fragment.appendChild(image);
}

var content = document.getElementById("content");
content.appendChild(fragment);

Breite, Höhe, Rahmen usw. kannst du dann wie gewohnt mit CSS machen.

Hard-Styler1 · 27 September 2008

<html>
<head>
<title>Array</title>

<script language="javascript">

bilder = new Array(10);

array[0] = "bilder1.jpg";
array[1] = "bilder2.jpg";
array[2] = "bilder3.jpg";
array[3] = "bilder4.jpg";
array[4] = "bilder5.jpg";
array[5] = "bilder6.jpg";
array[6] = "bilder7.jpg";
array[7] = "bilder8.jpg";
array[8] = "bilder9.jpg";
array[9] = "bilder10.jpg";

function schleife (bilder){

for (var i = 0; i < bilder.length; i++)
Ausgabe = Ausgabe + '<img src="' + i + '" alt="">';
document.write(Ausgabe);
}
</script>
</head>

<body onLoad="schleife">
</body>
</html>

warum geht das nicht ? sagt mir jetzt nicht syntax oder anderes javascriptisch sprache auf deutsch damit einanfanger es auch versteht

_Thor_ · 27 September 2008

Weil du hier

Code:

<body onLoad="schleife">

nicht deine Funktion aufrufst, das macht man so (beachte die Klammern)

Code:

<body onload="schleife()">

und die Variable Ausgabe nicht definiert ist, das muss so aussehen

Code:

var Ausgabe = Ausgabe + '<img src="' + i + '" alt="">';

Hard-Styler1 · 27 September 2008

<html>
<head>
<title>Array</title>

<script language="javascript">

bilder = new Array(10);

array[0] = "bilder1.jpg";
array[1] = "bilder2.jpg";
array[2] = "bilder3.jpg";
array[3] = "bilder4.jpg";
array[4] = "bilder5.jpg";
array[5] = "bilder6.jpg";
array[6] = "bilder7.jpg";
array[7] = "bilder8.jpg";
array[8] = "bilder9.jpg";
array[9] = "bilder10.jpg";

function schleife (bilder){

for (var i = 0; i < bilder.length; i++)
var Ausgabe = Ausgabe + '<img src="' + i + '" alt="">';
document.write(Ausgabe);
}
</script>
</head>

<body onload="schleife()">
</body>
</html>

was los mit euch testet ihr den müll nden ihr von euch last auch vorher den es geht immer noch nicht man redet nicht um den heisen brei und sagt dir richtige lösung oder macht den kopf zu danke

_Thor_ · 27 September 2008

Beide Versionen funktionieren, vielleicht solltest du dich erstmal mit den Grundlagen vertraut machen, anstatt hier ausfallend zu werden.

Das wars von mir, viel Glück.

Hard-Styler1 · 27 September 2008

<Thor> schrieb:
Das wars von mir, viel Glück.

Das is nett deine beiträge sind so unproduktiv wie zucker im tank danke

Und glück brauch niemand selbst is der man also erfolg werd ich bestimmt auch ohne dich haben könnte ihr auch auf jedes 2te tehma antworten aber dan kommt auch nur müll bei raus bwie bei dir also lass ich es andere machen die es besser können und so sölltest du auch mal denken

gruß hard-styler

Bleistift · 28 September 2008

Hallo,
der Code müsste funktionieren:

Code:

<html>
<head>
<title>Array</title>
 
<script type="text/javascript">
 
var bilder    =  new Array(10);
 
  bilder[0] = "bilder1.jpg";
  bilder[1] = "bilder2.jpg";
  bilder[2] = "bilder3.jpg";
  bilder[3] = "bilder4.jpg";
  bilder[4] = "bilder5.jpg";
  bilder[5] = "bilder6.jpg";
  bilder[6] = "bilder7.jpg";
  bilder[7] = "bilder8.jpg";
  bilder[8] = "bilder9.jpg";
  bilder[9] = "bilder10.jpg";
 
function schleife (){
    var Ausgabe = '';
    for (var i = 0; i < bilder.length; i++) {
         Ausgabe = Ausgabe + '<img src="' + bilder[i] + '" alt="Bild' + i + '">';
    }
    document.write(Ausgabe);
}
</script>
</head>
 
<body onload="schleife()">
</body>
</html>

Aber wenn das direkt beim Laden der Seite ausgeführt werden soll, würde ich es serverseitig mit PHP machen, weil manche Leute JS deaktiviert haben.
@<Thor> Wie sah die Ausgabe aus, als es "funktioniert" hat?
mfg Bleistift

_Thor_ · 28 September 2008

Hab das mal auf meinen Server geschoben.
Bilder aus einem Array auslesen

Hard-Styler1 · 28 September 2008

Hey Tohr bist ja doch wieder am start hey hey

schaut hab diese nacht das hier gemacht geht auch so wie es soll

PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>js</title>

<style type="text/css">
<!--

#box{
width:200px;
background-color:#333333;
border:solid 1px #000000;
}

//-->
</style>

<script type="text/javascript">
array    =  new Array(10);
 
  array[0] = "bilder1.jpg";
  array[1] = "bilder2.jpg";
  array[2] = "bilder3.jpg";
  array[3] = "bilder4.jpg";
  array[4] = "bilder5.jpg";
  array[5] = "bilder6.jpg";
  array[6] = "bilder7.jpg";
  array[7] = "bilder8.jpg";
  array[8] = "bilder9.jpg";
  array[9] = "bilder10.jpg";
  
function ausgabe(){
for (x=0; x<10; x++) {
document.write('<img width="150px" height="150px"  src="'+array[x]+'">');
}}



</script>

</head>
<body>
<div id="box"><center><script language="javascript">document.write(ausgabe());</script></center></div>
</body>
</html>

Lassen wir das mal so stehen last euch nicht vom html scheiß aplencken jetzt meine frage hab das mit einer schleife gemacht damit ich damit eine tabele erzeugen kann wie mit ner wihle schleife bei einer mysql apfrage denke das sagt euch mehr!

Jetzt wirtst schwer denke jetzt spielen nur noch die leute mit dir wirklich plan haben und zwar stelen wir uns einmal vor das ich anstat 10bilder ... 1000 hab jetzt soll er mir in der div box aber nur 10stück zeigen und zwar 5 rechts und 5 links und ein bottun drunter zb. next oder mehr was auch immer drückt man den kommen die nexten 10 bilder zum vorschein und die alten verschwinden das ganze soll lange laufen bis wir am ende also beim letzten bild sind und natürlich einen bottum der nach dem ersten mal mehr bilder auch zurück zeigt glaube das geht mit histori aber ihr wist es ja besser hoffe bekomme antwort mit viel erklärung und was auch sofort geht (<thor>)

lg:hardstyler

Bleistift · 29 September 2008

Hallo,
ich hab dir mal einen (funktionierenden) Quelltext geschrieben:

HTML:

<html>
<head>
<title>
Bilder-Galerie
</title>
<script type="text/javascript">
//Die Nummer der aktuellen Seite
var page = 0;
//Das Bilder-Array
var bilder = new Array();

function vor() {
    //eine Seite vor gehen oder wenn das Ende erreicht ist, an den Anfang gehen
    page = page + 1;
    if(page > bilder.length/10)
        page = 0;
        
    reload();
}

function zurück() {
    //eine Seite zurück
    if(page > 0)
        page = page - 1;
        
    reload();
}

function reload() {
    //alles neu laden
    window.document.getElementById('bild1').src = bilder[page * 10];
    window.document.getElementById('bild2').src = bilder[page * 10 + 1];
    window.document.getElementById('bild3').src = bilder[page * 10 + 2];
    window.document.getElementById('bild4').src = bilder[page * 10 + 3];
    window.document.getElementById('bild5').src = bilder[page * 10 + 4];
    window.document.getElementById('bild6').src = bilder[page * 10 + 5];
    window.document.getElementById('bild7').src = bilder[page * 10 + 6];
    window.document.getElementById('bild8').src = bilder[page * 10 + 7];
    window.document.getElementById('bild9').src = bilder[page * 10 + 8];
    window.document.getElementById('bild10').src = bilder[page * 10 + 9];
}
</script>
</head>
<body onload="reload()">
<a href="javascript:vor()">Vor</a>
<a href="javascript:zurück()">Zur&uuml;ck</a>
<br />
<table>
<tr>
<td>
<image id="bild1" name="bild1" src="" width="400" height="300" />
</td>
<td>
<image id="bild2" name="bild2" src="" width="400" height="300" />
</td>
</tr>
<tr>
<td>
<image id="bild3" name="bild3" src="" width="400" height="300" />
</td>
<td>
<image id="bild4" name="bild4" src="" width="400" height="300" />
</td>
</tr>
<tr>
<td>
<image id="bild5" name="bild5" src="" width="400" height="300" />
</td>
<td>
<image id="bild6" name="bild6" src="" width="400" height="300" />
</td>
</tr>
<tr>
<td>
<image id="bild7" name="bild7" src="" width="400" height="300" />
</td>
<td>
<image id="bild8" name="bild8" src="" width="400" height="300" />
</td>
</tr>
<tr>
<td>
<image id="bild9" name="bild9" src="" width="400" height="300" />
</td>
<td>
<image id="bild10" name="bild10" src="" width="400" height="300" />
</td>
</tr>
</table>
</body>
</html>

Du musst nur noch das Design anpassen und in das Bilder-Array die Bilderpfade schreiben. Außerdem gibt es noch einen kleinen Fehler: wenn man auf der letzten Seite ankommt dann sind ja nicht für alle img-Tags auch Bilder da. Im IE wird dann angezeigt, dass kein Bild geladen werden kann, im Firefox bleiben an diesen Stellen die alten Bilder. Das müsstest du auch noch machen(vielleicht mit CSS("display: xxx;") unsichtbar machen).;-)
mfg Bleistift

array in einer schleife ausgeben

Hard-Styler1

Neues Mitglied

threadi

Moderator

Hard-Styler1

Neues Mitglied

threadi

Moderator

Hard-Styler1

Neues Mitglied

threadi

Moderator

_Thor_

Aktives Mitglied

Hard-Styler1

Neues Mitglied

_Thor_

Aktives Mitglied

Hard-Styler1

Neues Mitglied

_Thor_

Aktives Mitglied

Hard-Styler1

Neues Mitglied

Bleistift

Mitglied

_Thor_

Aktives Mitglied

Hard-Styler1

Neues Mitglied

Bleistift

Mitglied

Neueste Beiträge