✔ Problem mit Buttons

S

Schnacki

Mitglied
HI,
ich habe ein Problem in Java Script.
Ich habe gerade erst angefangen, programmiere sonst nur JAVA.
Also, ich möchte eine Seite machen auf der 2 Buttons sind und ein Bild.
Wenn man auf die Buttons klickt soll entweder das nächste oder das Bild davor angezeigt werden.
Die Bilder habe ich in einem Array.
Aber irgendwie klappt das nicht richtig.
Der lädt die ganze Zeit und es klappt dann nicht mehr.

Hier ist der Code:
Code: 
<HTML>
<HEAD>
<title>Bilder</title>
</HEAD>
<BODY>
<script type="text/javascript">
 var bild = 0;
function SchreibeTabelle () {
	

	bilder = new Array("a.gif","b.gif");
	document.write("<INPUT TYPE=button ONCLICK=plus() VALUE='>>'");
	document.write("<INPUT TYPE=button ONCLICK=minus() VALUE='<<'");
	document.write("<IMG SRC=" + bilder[bild] + " WIDTH=100 HEIGHT=100 ALT=" +bilder[bild]+ ">");
	
 
}
function minus() {
	bild--;
	alert(bild);
	SchreibeTabelle();
}
function plus() {
	bild++;
	alert(bild);
	SchreibeTabelle();
}

SchreibeTabelle();
</script>
</BODY>
<HTML>
Könnt ihr mir helfen?
 
Du hast einen Fehler drin.

Code: 
document.write("<INPUT TYPE=button ONCLICK=plus() VALUE='>>'");
document.write("<INPUT TYPE=button ONCLICK=minus() VALUE='<<'");

Du hast vergessen das input - Tag zu schließen.

Code: 
document.write("<INPUT TYPE=button ONCLICK=plus() VALUE='>>'>");
document.write("<INPUT TYPE=button ONCLICK=minus() VALUE='<<'>");

Jedoch ich würde es sowieso anders machen. Weil.....

Jedesmal wenn du die Funktion 'SchreibeTabelle' aufrufst, wird das Array erneut mit den Bildernamen gefüllt, und die Tabelle neu aufgebaut.

Ich würde es wie folgt machen.

HTML: 
<html>
 <head>
  <title>Bilder</title>
   <script type="text/javascript">

    var bild = 0;
    bilder = new Array("a.jpg","b.jpg","c.jpg");

    function minus() {
        bild--;
        wechselBild();
    }
    function plus() {
        bild++;
        wechselBild();
    }
    function wechselBild () {

        if(bild < 0){ 
            bild = bilder.length - 1;
        }
        if(bild == bilder.length){
            bild = 0;
        }
        document.images[0].src = bilder[bild];
        document.images[0].alt = bilder[bild];
    }
   </script>

  </head>

  <body>
   <form action="" method="" target="">
    <table >
     <tr>
      <td><img src="a.jpg" width="660" height="495" border="0" alt="a.jpg"></td>
     </tr>
     <tr>
      <td align="center">
       <input type="button" onClick="minus()" value="<<">
       <input type="button" onClick="plus()" value=">>">
      </td>
     </tr>
    </table>

   </form>
  </body>
 <html>

Die zwei Vergleiche sind dafür da, dass wenn das letzte Bild erreicht wurde, das nächste Bild das erste Bild ist, und umgekehrt.

Habe es getestet und es funktioniert ;)
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück