Problema con función Javascript

#1 (**permalink**) 18/12/2008, 14:52

Hola, estoy tratando de entender Javascript, son mis primeros pasos. Quiero hacer una funcion que pueda remover una foto mostrada en una página, sin recargar la página. La idea es que en realidad se reemplaze por otra, pero bueno empiezo por esto para entender. Probé varias cosas pero no me funciona. Qué es lo que está mal ?

Código HTML:

<html>
<head>
<title>Galeria de Fotos</title>

<script language="Javascript">
function sacarfoto() {
document.getElementById('foto');
var padre = foto.parentNode;
padre.removeChild('foto');
}
</script>

</head>
<body>

<div align="center">
  <table>
    <tbody>
      <tr>
        <td onclick="sacarfoto();"><img src="fotos/left.gif"></td>
        <td onclick="sacarfoto();"><img src="fotos/right.gif"></td>
      </tr>
      <tr>
        <td><img id="foto" src="fotos/foto06.jpg"></td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>

the_web_saint · #2 (**permalink**) 18/12/2008, 15:02

Prueba de esta forma:

Cita:

<html>
<head>
<title>Galeria de Fotos</title>

<script language="Javascript">
function sacarfoto() {
document.getElementById('DivFoto').innerHTML='';
}
</script>

</head>
<body>

<div align="center">
<table>
<tbody>
<tr>
<td onclick="sacarfoto();"><img src="fotos/left.gif"></td>
<td onclick="sacarfoto();"><img src="fotos/right.gif"></td>
</tr>
<tr>
<td><div id="DivFoto"><img id="foto" src="fotos/foto06.jpg"></div></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

#3 (**permalink**) 18/12/2008, 15:15

Perfecto, muchas gracias.

Cómo haría ahora para que en vez de sacar una foto, ponga otra.
Imagino que en el innerHTML le tengo que decir que ponga otra cosa.

the_web_saint · #4 (**permalink**) 18/12/2008, 15:59

Claro, ahí le colocas el código HTML que deseas insertar en el div.

Saludos

#5 (**permalink**) 18/12/2008, 17:37

Ahora me enfrento al siguiente problema. Necesito que el codigo que se escribe dentro del innetHTML pueda ser variable.
En esta sentencia:

document.getElementById('DivFoto').innerHTML='<img src="fotos/foto06.jpg">';

como hago para que el nombre de la foto sea una variable? Probé esto pero no funciona, sería concatenar parte de string fijo con la variable.
Para probar le asigno yo un valor a la variable foto.

var foto = "foto01.jpg"
document.getElementById('DivFoto').innerHTML='<img src="fotos/'+=foto+='">';

#6 (**permalink**) 18/12/2008, 18:28

LLegué a esto pero no me funciona, hace solo el primer cambio y después no hace más nada. Qué puede estar pasando ?

Código HTML:

<html>
<head>
<title>Galeria de Fotos</title>

<script language="Javascript">
fotonum = 1;
function atrasfoto() {
fotonum = fotonum - 1;
if(fotonum > 1){
  var mostrarprin = '<img src="fotos/foto';
  var mostrarfin = '">';
  var mostrar = mostrarprin+=fotonum+=mostrarfin;
  document.getElementById('DivFoto').innerHTML='';
  document.getElementById('DivFoto').innerHTML=mostrar;
  }
}

function adelantefoto() {
fotonum = fotonum + 1;
if(fotonum < 6){
  var mostrarprin = '<img src="fotos/foto';
  var mostrarfin = '">';
  var mostrar = mostrarprin+=fotonum+=mostrarfin;
  document.getElementById('DivFoto').innerHTML='';
  document.getElementById('DivFoto').innerHTML=mostrar;
  }
}
</script>

</head>
<body>
<div align="center">
  <table>
    <tr>
      <td onclick="atrasfoto();"><img src="fotos/left.gif"></td>
      <td onclick="adelantefoto();"><img src="fotos/right.gif"></td>
    </tr>
  </table>
  <table>
    <tr>
      <td><div id="DivFoto"><img src="fotos/foto1.jpg"></div></td>
    </tr>
  </table>
</div>
</body>
</html>

the_web_saint · #7 (**permalink**) 19/12/2008, 09:38

Intenta de esta forma.

Código HTML:

<html>
<head>
<title>Galeria de Fotos</title>

<script language="Javascript">
fotonum = 1;
function atrasfoto() {
fotonum = fotonum - 1;
if(fotonum > 1){
  var mostrarprin = '<img src="fotos/foto';
  var mostrarfin = '">';
  var mostrar = mostrarprin+fotonum+'.jpg'+mostrarfin;
  document.getElementById('DivFoto').innerHTML=mostrar;
  }
}

function adelantefoto() {
fotonum = fotonum + 1;
if(fotonum < 6){
  var mostrarprin = '<img src="fotos/foto';
  var mostrarfin = '">';
  var mostrar = mostrarprin+fotonum+'.jpg'+mostrarfin;
  document.getElementById('DivFoto').innerHTML=mostrar;
  }
}
</script>

</head>
<body>
<div align="center">
  <table>
    <tr>
      <td onclick="atrasfoto();"><img src="fotos/left.gif"></td>
      <td onclick="adelantefoto();"><img src="fotos/right.gif"></td>
    </tr>
  </table>
  <table>
    <tr>
      <td><div id="DivFoto"><img src="fotos/foto1.jpg"></div></td>
    </tr>
  </table>
</div>
</body>
</html>

La razón principal era que no colocaste el tipo de imagen, la extensión.

Saludos