Fehler im Javascript - Funktion funktioniert nicht

elamela · 10.05.2010

Hallo!

Ich habe eine Bildergalerie gemacht, bzw eine simple "Vorheriges/Nächstes Bild" Funktion. Leider funktioniert das ganze nicht. Bevor ich etwas im HTML verändert hatte, funktionierte es. Ich schreibe hier einfach mal Ausschnitte aus dem Javascript und HTML rein.

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<script type="text/javascript">
<!--
// Funktion zur Sichtbarkeit des DIV Layers
function logotipos() {
    if(document.getElementById('logotipos').style.visibility=='hidden') {
        document.getElementById('logotipos').style.visibility='visible';
        document.getElementById('papeleria').style.visibility='hidden';
        document.getElementById('aplicaciones').style.visibility='hidden';
    }
}

function papeleria() {
    if(document.getElementById('papeleria').style.visibility=='hidden') {
        document.getElementById('logotipos').style.visibility='hidden';
        document.getElementById('papeleria').style.visibility='visible';
        document.getElementById('aplicaciones').style.visibility='hidden';
    }
}

function aplicaciones() {
    if(document.getElementById('aplicaciones').style.visibility=='hidden') {
        document.getElementById('logotipos').style.visibility='hidden';
        document.getElementById('papeleria').style.visibility='hidden';
        document.getElementById('aplicaciones').style.visibility='visible';
    }
 }

// Funktionen der Bildergalerie

var imagenes = new Array(5);
    imagenes[0] = "imagenes/grafico/logotipo00.jpg";
    imagenes[1] = "imagenes/grafico/logotipo01.jpg";
    imagenes[2] = "imagenes/grafico/logotipo02.jpg";
    imagenes[3] = "imagenes/grafico/logotipo03.jpg";
    imagenes[4] = "imagenes/grafico/logotipo04.jpg";

var i = 0;

function cargarImagenLogotipo(){
  document.imgSrcLogotipo.src = imagenes[i];
}

function anteriorLogotipo(){
  if(i<4){
    var NumImagen = i;
  } else {
    var NumImagen = i-=1;
  }
  document.imgSrcLogotipo.src = imagenes[NumImagen];
}

function siguienteLogotipo(){
  if(i>0){
    var NumImagen = i;
  } else {
    var NumImagen = i+=1;
  }
  document.imgSrcLogotipo.src = imagenes[NumImagen];
}

var imagenes = new Array(5);
    imagenes[0] = "imagenes/grafico/papeleria01.jpg";
    imagenes[1] = "imagenes/grafico/papeleria02.jpg";
    imagenes[2] = "imagenes/grafico/papeleria03.jpg";
    imagenes[3] = "imagenes/grafico/papeleria04.jpg";
    imagenes[4] = "imagenes/grafico/papeleria05.jpg";

var j = 0;

function cargarImagenPapeleria(){
  document.imgSrcPapeleria.src = imagenes[j];
}

function anteriorPapeleria(){
  if(j<4){
    var NumImagen = j;
  } else {
    var NumImagen = j-=1;
  }
  document.imgSrcPapeleria.src = imagenes[NumImagen];
}

function siguientePapeleria(){
  if(j>0){
    var NumImagen = j;
  } else {
    var NumImagen = j+=1;
  }
  document.imgSrcPapeleria.src = imagenes[NumImagen];
}

// Función para las imagenes de Aplicaciones
var imagenes = new Array(5);
    imagenes[0] = "imagenes/grafico/aplicaciones01.jpg";
    imagenes[1] = "imagenes/grafico/aplicaciones02.jpg";
    imagenes[2] = "imagenes/grafico/aplicaciones03.jpg";
    imagenes[3] = "imagenes/grafico/aplicaciones04.jpg";
    imagenes[4] = "imagenes/grafico/aplicaciones05.jpg";

var k = 0;

function cargarImagenAplicaciones(){
  document.imgSrcAplicaciones.src = imagenes[k];
}

function anteriorAplicaciones(){
  if(k<4){
    var NumImagen = k;
  } else {
    var NumImagen = k-=1;
  }
  document.imgSrcAplicaciones.src = imagenes[NumImagen];
}

function siguienteAplicaciones(){
  if(k>0){
    var NumImagen = k;
  } else {
    var NumImagen = k+=1;
  }
  document.imgSrcAplicaciones.src = imagenes[NumImagen];
}

function galeria(){
    window.onload = cargarImagenLogotipo();
    window.onload = cargarImagenPapeleria();
    window.onload = cargarImagenAplicaciones();
}
-->
</script>

</head>

<body onLoad="galeria()">

<div id="g_ident" class="menu_invisible">
    <ul class="submenu">
        <li><a href="#" onClick="logotipos()">Logotipos </a></li>
        <li><a href="#" onClick="papeleria()">Papeleria </a></li>
        <li><a href="#" onClick="aplicaciones()">Aplicaciones </a></li>
    </ul>
</div>

<div id="logotipos" style="visibility:hidden">
   <div class="image">
        <img src="imagenes/grafico/logotipo00.jpg" id="imgSrcLogotipo" alt="Logotipo 00"> 
   </div>
   <div class="ant_sig">
        <div class="anterior">
            <a href="#" onClick="anteriorLogotipo()">&nbsp; Anterior</a>
        </div>
        <div class="siguiente">
            <a href="#" onClick="siguienteLogotipo()">Siguiente &nbsp;</a>
        </div>
    </div>
</div>
        
<div id="papeleria" style="visibility:hidden">
   <div class="image">
        <img src="imagenes/grafico/papeleria01.jpg"  id="imgSrcPapeleria" alt="Papeleria 01"> 
   </div>
   <div class="ant_sig">
        <div class="anterior">
            <a href="#" onClick="anteriorPapeleria()">&nbsp;  Anterior</a>
        </div>
        <div class="siguiente">
            <a href="#" onClick="siguientePapeleria()">Siguiente  &nbsp;</a>
        </div>
    </div>
</div>

<div id="aplicaciones" style="visibility:hidden">
   <div class="image">
        <img src="imagenes/grafico/aplicaciones01.jpg"  id="imgSrcAplicaciones" alt="Logotipo 00"> 
   </div>
   <div class="ant_sig">
        <div class="anterior">
            <a href="#" onClick="anteriorAplicaciones()">&nbsp;  Anterior</a>
        </div>
        <div class="siguiente">
            <a href="#" onClick="siguienteAplicaciones()">Siguiente  &nbsp;</a>
        </div>
    </div>
</div>

</body>
</html>

Zur Information: "Anterior" heisst "Vorheriges" und "Siguiente" heisst "Nächstes". Die Sprache sollte allerdings nicht weiter interessieren denke ich

Wenn jemand also einen Fehler findet, wär ich ihm sehr verbunden!
Ich bitte allerdings darum, mir nicht andere Vorschläge zu machen wie ich das oder das besser machen könnte, und warum ich keine fertige Bildergalerie im Internet suche etc. Ich möchte an dem Konstrukt nichts verändern, lediglich die Fehler!
Also bitte nicht anfangen mit "da gibt es aber bessere Varianten" oder "wenn du Prototype benutzt geht das schneller" danke

PS: Das erste Bild ruft er mir übrigens auf, wenn ich nur die Funktion "Logotipo" stehen lasse und die andern auskommentiere. Das 2. Bild allerdings nicht mehr.

netbandit · 10.05.2010

AW: Fehler im Javascript - Funktion funktioniert nicht

Die ID sollte schon einmalig sein, ob das jetzt allerdings der Fehler ist, k.A.

elamela · 11.05.2010

AW: Fehler im Javascript - Funktion funktioniert nicht

Das war leider nicht der Fehler denn im HTML ist es richtig. Das war nur ein Fehler meinerseits beim kopieren des Quelltextes...
werde es hier mal korrigieren.

Hat sonst niemand eine Lösung??

Steve1405 · 11.05.2010

AW: Fehler im Javascript - Funktion funktioniert nicht

Kommentier den Javascriptbereich mal aus, weil der Browser die Größer- und Kleiner-Als in deinen If-Abfragen als Start bzw. Ende eines Tags interpretiert:

Code:

<head>
<script>
<!--

// Javascriptcode

//-->
</script>
</head>

elamela · 11.05.2010

AW: Fehler im Javascript - Funktion funktioniert nicht

Hallo !

Also . ich habe die Version nur zusammengefasst.
In meiner Version steht das ganze in einer Extra Datei die sich "galeria.js" nennt und im gleichen ordner wie die HTML seite steht. und in der html dementsprechend die JS verlinkt ist.

Steve1405 · 11.05.2010

AW: Fehler im Javascript - Funktion funktioniert nicht

Dann poste entweder den Code so wie er in der Realität aussieht oder gleich eine URL zu der Page, was viel sinnvoller wäre..

gruß

sokie · 11.05.2010

AW: Fehler im Javascript - Funktion funktioniert nicht

Steve1405 schrieb:
Kommentier den Javascriptbereich mal aus, weil der Browser die Größer- und Kleiner-Als in deinen If-Abfragen als Start bzw. Ende eines Tags interpretiert:

Code:

<head> <script>  </script> </head>

einmal sollte gesagt werden, dass es praktisch keine Browser mehr gibt, die script-Beriche nicht erkennen.
Zum anderen und wichtiger ist etwa, dass der kommentar auch für javascript auskommentiert werden muss und deshalb mit

Code:

//-->

enden müsste, damit er nicht seinerseits Fehler verursacht.

Steve1405 · 11.05.2010

AW: Fehler im Javascript - Funktion funktioniert nicht

Stimmt sokie, da hast du natürlich recht. Ich habe den Quellcode im W3C Validator getestet und da war der einzige mögliche Fehler, den ich entdecken konnte, die "<" und ">" im Javascript-Quellcode. Deshalb dachte ich die Kommentare könnten helfen.

Kann aber auch sein, dass ich was übersehen habe

elamela · 17.05.2010

AW: Fehler im Javascript - Funktion funktioniert nicht

alles ausprobiert! ist aber nicht der fehler