[SOLUCIONADO] usar la misma funcion mas de 1 vez

[satanson123]

Hola amigos me gustaria saber como puedo ejecutar la misma funcion mas de una ves.

Ejemplo:

tengo este simple codigo:

Código HTML:

<img onclick="big_img();" id="img-p" src='$1' title="Click para ver">
 

donde $1 es la variable de la url, ahora cuando le dan click se supone que la imagen se amplia mas grande con el siguiente codigo:

Código Javascript:

function big_img(){
      var img=document.getElementById('img-p');
      if(img.style.maxWidth=="400px"){
      img.style.maxWidth="120px";
      }else{
      img.style.maxWidth="400px";
      }
     
 
      }
 

Lo qeu pasa es que si tengo varias imagenes solo se amplia la primera sin importar a cual le de click. Como haria para que se amplie a la imagen que le de click?

[caricatos]

Hola:

Podrías usar el id como parámetro...

Código Javascript:

function big_img(imagen){
      var img=document.getElementById(imagen);
      if(img.style.maxWidth=="400px"){
      img.style.maxWidth="120px";
      }else{
      img.style.maxWidth="400px";
}
 

y la llamada:

Código Javascript:

onclick="big_img(this.id);"
 

Saludos

[satanson123]

Iniciado por caricatos

Hola:

Podrías usar el id como parámetro...

Código Javascript:

function big_img(imagen){
      var img=document.getElementById(imagen);
      if(img.style.maxWidth=="400px"){
      img.style.maxWidth="120px";
      }else{
      img.style.maxWidth="400px";
}
 

y la llamada:

Código Javascript:

onclick="big_img(this.id);"
 

Saludos

Lo hice como me dices pero hace lo mismo, si tengo agregada 5 imagenes y le doy click a cualquiera solo se expande la primera. Alguna otra idea?

[caricatos]

Hola:

Iniciado por satanson123

Lo hice como me dices pero hace lo mismo, si tengo agregada 5 imagenes y le doy click a cualquiera solo se expande la primera...

Estás seguro que usas el atributo id "único"... ese atributo no debe repetirse

Iniciado por satanson123

... Alguna otra idea?

Solo te puede fallar si has comentido algún error (como el que planteé antes

otra forma sería pasarle directamente this, y cambiar algo en la función:

Código Javascript:

function big_img(img){
      //var img=document.getElementById(imagen);
// ...
 

Fíjate que cambié el nombre del parámetro, y que convertí en comentario la primera línea, o sea, que la puedes omitir...

... y si sigue sin funcionarte, muéstranos el código, que es muy fácil soltar que algo no funciona... yo no me lo he tragado...

Saludos

[Alexis88]

El método getElementById se utilizar para trabajar con un solo elemento pues el id es un dato único e irrepetible en el DOM. Lo que puedes hacer es asignar una misma clase a todas las imágenes, tomarlas ya sea con el método getElementByClassName o con querySelectorAll (recomendado), iterar sobre el conjunto resultante y aplicar el cambio de tamaño a cada elemento.

Código HTML:

<img src = "imagen1.jpg" class = "foo" />
<img src = "imagen2.jpg" class = "foo" />
<img src = "imagen3.jpg" class = "foo" />
 
<button id = "bar">Cambiar tamaño de imágenes</button>
 

Código Javascript:

var boton = document.querySelector("#bar"),
    imagenes = document.querySelectorAll(".foo"),
    total = imagenes.length;
 
boton.addEventListener("click", function(){
    for (var i = 0; i < total; i++){
        if (getComputedStyle(imagenes[i]).maxWidth == "400px"){
            imagenes[i].style.maxWidth = "120px";
        }
        else{
            imagenes[i].style.maxWidth = "400px";
        }
    }
}, false);
 

DEMO

Con el método getComputedStyle, obtengo el estilo computado del elemento.

Saludos

[caricatos]

Hola:

Iniciado por Alexis88

...iterar sobre el conjunto resultante y aplicar el cambio de tamaño a cada elemento...

Me fijé en la demo porque al ver el código pensé que cambiabas el tamaño a todas las imágenes, y así es... pero viendo el mensaje inicial:

Iniciado por satanson123

... Como haría para que se amplíe a la imagen que le de click?

Creo que no es lo que se pide

Saludos

[Alexis88]

Edito: Luego de volver a leer el problema, he notado que el problema probablemente radique en los identificadores que satanson123 esté usando. Por leer rápido y con el cansancio de las 3 de la mañana, entendí que intentaba afectar a varias imágenes a la vez, pero veo que no es así. Si dice que lo hizo como se lo indicaste y solo se ve afectada la primera imagen, es porque, efectivamente, está utilizando el mismo identificador para todas las imágenes.

Saludos

[marlanga]

Código HTML:

<img onclick="big_img(this);" id="img-p" src='$1' title="Click para ver">
 

Código Javascript:

function big_img(img){
      if(img.style.maxWidth=="400px"){
      img.style.maxWidth="120px";
      }else{
      img.style.maxWidth="400px";
      }
     
 
      }
 

Código idéntico, pero usando "this".

PD. Releyendo, ésto ya te lo han dicho.

[satanson123]

Iniciado por marlanga

Código HTML:

<img onclick="big_img(this);" id="img-p" src='$1' title="Click para ver">
 

Código Javascript:

function big_img(img){
      if(img.style.maxWidth=="400px"){
      img.style.maxWidth="120px";
      }else{
      img.style.maxWidth="400px";
      }
     
 
      }
 

Código idéntico, pero usando "this".

PD. Releyendo, ésto ya te lo han dicho.

Super me funciono de maravilla.

Ten unas dudas:
1- El nombre de la funcion que dentro los parentesis esta img se refiere a la etiqueta <img src="">?
2-El this que esta en el onclick por que se usa? onclick="big_img(this);"

[javier_u]

Siguiendo con este tema, ampliándolo un poco, ¿alguien sabe cómo se podría cambiar el tamaño de dos imágenes pulsando un botón. En el ejemplo que dejo en el código sólo cambia el tamaño de una imagen. Un saludo. Javier.

Código Java:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ejemplo- FDW</title>
 
<script>
function big_img(){
      var img=document.getElementById('img-p');
      if(img.style.maxWidth=="400px"){
      img.style.maxWidth="120px";
      }else{
      img.style.maxWidth="400px";
      }
      }
</script>
 
</head>
 
<body>
  <div>
    <button id = "bar" onclick="big_img(this)">Cambiar tamaño de imágenes</button>
  </div>
 
    <img " id="img-p" src="http://www.absolut-canada.com/wp-content/uploads/2009/09/pesca-en-quebec.jpg" title="Click para ver"> 
    <img " id="img-p" src="http://static3.absolutcaribe.com/wp-content/uploads/2009/09/playa-placencia.jpg" title="Click para ver">    
 
</body>
</html>
 

[satanson123]

Iniciado por javier_u

Siguiendo con este tema, ampliándolo un poco, ¿alguien sabe cómo se podría cambiar el tamaño de dos imágenes pulsando un botón. En el ejemplo que dejo en el código sólo cambia el tamaño de una imagen. Un saludo. Javier.

Código Java:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ejemplo- FDW</title>
 
<script>
function big_img(){
      var img=document.getElementById('img-p');
      if(img.style.maxWidth=="400px"){
      img.style.maxWidth="120px";
      }else{
      img.style.maxWidth="400px";
      }
      }
</script>
 
</head>
 
<body>
  <div>
    <button id = "bar" onclick="big_img(this)">Cambiar tamaño de imágenes</button>
  </div>
 
    <img " id="img-p" src="http://www.absolut-canada.com/wp-content/uploads/2009/09/pesca-en-quebec.jpg" title="Click para ver"> 
    <img " id="img-p" src="http://static3.absolutcaribe.com/wp-content/uploads/2009/09/playa-placencia.jpg" title="Click para ver">    
 
</body>
</html>
 

Hola mas arriba nuestro querido amigo Alexis88 tiene un ejemplo con 3 imagenes seguro que con ese ejemplo te funciona.

[javier_u]

Iniciado por satanson123

Hola mas arriba nuestro querido amigo Alexis88 tiene un ejemplo con 3 imagenes seguro que con ese ejemplo te funciona.

Gracias satanson. Lo he estado intentando pero el ejemplo de Alexis no lo sé aplicar. No sé nada de html mi de javascript.

Ésta es la solución de Alexis:

Código Javascript:

<img src = "imagen1.jpg" class = "foo" />
<img src = "imagen2.jpg" class = "foo" />
<img src = "imagen3.jpg" class = "foo" />
 
<button id = "bar">Cambiar tamaño de imágenes</button>
 

Código Javascript:

var boton = document.querySelector("#bar"),
    imagenes = document.querySelectorAll(".foo"),
    total = imagenes.length;
 
boton.addEventListener("click", function(){
    for (var i = 0; i < total; i++){
        if (getComputedStyle(imagenes[i]).maxWidth == "400px"){
            imagenes[i].style.maxWidth = "120px";
        }
        else{
            imagenes[i].style.maxWidth = "400px";
        }
    }
}, false);
 

Le estoy dando vueltas pero no sé cómo escribir éste código para mi ejemplo:

Código Javascript:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ejemplo- FDW</title>
 
<script>
function big_img(){
      var img=document.getElementById('img-p');
      if(img.style.maxWidth=="400px"){
      img.style.maxWidth="120px";
      }else{
      img.style.maxWidth="400px";
      }
      }
</script>
 
</head>
 
<body>
  <div>
    <button id = "bar" onclick="big_img(this)">Cambiar tamaño de imágenes</button>
  </div>
 
    <img " id="img-p" src="http://www.absolut-canada.com/wp-content/uploads/2009/09/pesca-en-quebec.jpg" title="Click para ver"> 
    <img " id="img-p" src="http://static3.absolutcaribe.com/wp-content/uploads/2009/09/playa-placencia.jpg" title="Click para ver">    
 
</body>
</html>
 

Si alguien puede decirme se lo agradezco mucho. Un saludo.

[Alexis88]

Iniciado por satanson123

Ten unas dudas:
1- El nombre de la funcion que dentro los parentesis esta img se refiere a la etiqueta <img src="">?
2-El this que esta en el onclick por que se usa? onclick="big_img(this);"

1. Claro, puesto que a la función se le está pasando el propio elemento mediante la palabra reservada this, la cual, en este caso, hace referencia al elemento <img> al que se le dio el clic.
2. Creo que esto está explicado en el punto anterior.

Saludos

[satanson123]

Iniciado por javier_u

Gracias satanson. Lo he estado intentando pero el ejemplo de Alexis no lo sé aplicar. No sé nada de html mi de javascript.

Ésta es la solución de Alexis:

Código Javascript:

<img src = "imagen1.jpg" class = "foo" />
<img src = "imagen2.jpg" class = "foo" />
<img src = "imagen3.jpg" class = "foo" />
 
<button id = "bar">Cambiar tamaño de imágenes</button>
 

Código Javascript:

var boton = document.querySelector("#bar"),
    imagenes = document.querySelectorAll(".foo"),
    total = imagenes.length;
 
boton.addEventListener("click", function(){
    for (var i = 0; i < total; i++){
        if (getComputedStyle(imagenes[i]).maxWidth == "400px"){
            imagenes[i].style.maxWidth = "120px";
        }
        else{
            imagenes[i].style.maxWidth = "400px";
        }
    }
}, false);
 

Le estoy dando vueltas pero no sé cómo escribir éste código para mi ejemplo:

Código Javascript:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ejemplo- FDW</title>
 
<script>
function big_img(){
      var img=document.getElementById('img-p');
      if(img.style.maxWidth=="400px"){
      img.style.maxWidth="120px";
      }else{
      img.style.maxWidth="400px";
      }
      }
</script>
 
</head>
 
<body>
  <div>
    <button id = "bar" onclick="big_img(this)">Cambiar tamaño de imágenes</button>
  </div>
 
    <img " id="img-p" src="http://www.absolut-canada.com/wp-content/uploads/2009/09/pesca-en-quebec.jpg" title="Click para ver"> 
    <img " id="img-p" src="http://static3.absolutcaribe.com/wp-content/uploads/2009/09/playa-placencia.jpg" title="Click para ver">    
 
</body>
</html>
 

Si alguien puede decirme se lo agradezco mucho. Un saludo.

Prueba asi:

Código HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ejemplo- FDW</title>
 <style>
#img-p{
max-width: 120px;
}
</style>
<script>
function big_img(){
      var img=document.getElementById('img-p');
      if(img.style.maxWidth=="400px"){
      img.style.maxWidth="120px";
      }else{
      img.style.maxWidth="400px";
      }
      }
</script>
 
</head>
 
<body>
  <div>
    <button id="bar" onclick="big_img();">Cambiar tamaño de imágenes</button>
  </div>
 
    <img id="img-p" src="http://www.absolut-canada.com/wp-content/uploads/2009/09/pesca-en-quebec.jpg" title="Click para ver"> 
    <img id="img-p" src="http://static3.absolutcaribe.com/wp-content/uploads/2009/09/playa-placencia.jpg" title="Click para ver">    
 
</body>
</html>
 

[javier_u]

Iniciado por satanson123

Prueba asi:

Código HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ejemplo- FDW</title>
 <style>
#img-p{
max-width: 120px;
}
</style>
<script>
function big_img(){
      var img=document.getElementById('img-p');
      if(img.style.maxWidth=="400px"){
      img.style.maxWidth="120px";
      }else{
      img.style.maxWidth="400px";
      }
      }
</script>
 
</head>
 
<body>
  <div>
    <button id="bar" onclick="big_img();">Cambiar tamaño de imágenes</button>
  </div>
 
    <img id="img-p" src="http://www.absolut-canada.com/wp-content/uploads/2009/09/pesca-en-quebec.jpg" title="Click para ver"> 
    <img id="img-p" src="http://static3.absolutcaribe.com/wp-content/uploads/2009/09/playa-placencia.jpg" title="Click para ver">    
 
</body>
</html>
 

He probado ese ejemplo que me has dejado, satanson. Funciona casi igual al otro código que yo tenía pero mejor, creo que esta mas depurado. Al pulsar el botón cambia el tamaño sólo de la primera foto. Lo que trataba era de cambiar el tamaño de las dos fotos.

Gracias por tu ayuda.
Un saludo.

[satanson123]

Iniciado por javier_u

He probado ese ejemplo que me has dejado, satanson. Funciona casi igual al otro código que yo tenía pero mejor, creo que esta mas depurado. Al pulsar el botón cambia el tamaño sólo de la primera foto. Lo que trataba era de cambiar el tamaño de las dos fotos.

Gracias por tu ayuda.
Un saludo.

Usa el mismo ejemplo que te comente mas arriba:

Código HTML:

<!DOCTYPE html>
<!--
Created using JS Bin
http://jsbin.com
 
Copyright (c) 2014 by anonymous (http://jsbin.com/mukaxowufu/1/edit)
 
Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
<html>
<head>
  <meta charset="utf-8">
  <title>Ejemplo- FDW</title>
<style id="jsbin-css">
#bar{
    display: block;
}
 
.foo{
    max-width: 400px;
}
</style>
</head>
<body>
    <button id = "bar">Cambiar tamaño de imágenes</button>  
  
    <img src = "http://www.absolut-canada.com/wp-content/uploads/2009/09/pesca-en-quebec.jpg" class = "foo" />
    <img src = "http://static3.absolutcaribe.com/wp-content/uploads/2009/09/playa-placencia.jpg" class = "foo" />
<script id="jsbin-javascript">
var boton = document.querySelector("#bar"),
    imagenes = document.querySelectorAll(".foo"),
    total = imagenes.length;
 
boton.addEventListener("click", function(){
    for (var i = 0; i < total; i++){
        if (getComputedStyle(imagenes[i]).maxWidth == "400px"){
            imagenes[i].style.maxWidth = "120px";
        }
        else{
            imagenes[i].style.maxWidth = "400px";
        }
    }
}, false);
</script>
</body>
</html>
 

Solo tenias que borrar una imagen.

[javier_u]

Iniciado por satanson123

Usa el mismo ejemplo que te comente mas arriba:

Código HTML:

<!DOCTYPE html>
<!--
Created using JS Bin
http://jsbin.com
 
Copyright (c) 2014 by anonymous (http://jsbin.com/mukaxowufu/1/edit)
 
Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
<html>
<head>
  <meta charset="utf-8">
  <title>Ejemplo- FDW</title>
<style id="jsbin-css">
#bar{
    display: block;
}
 
.foo{
    max-width: 400px;
}
</style>
</head>
<body>
    <button id = "bar">Cambiar tamaño de imágenes</button>  
  
    <img src = "http://www.absolut-canada.com/wp-content/uploads/2009/09/pesca-en-quebec.jpg" class = "foo" />
    <img src = "http://static3.absolutcaribe.com/wp-content/uploads/2009/09/playa-placencia.jpg" class = "foo" />
<script id="jsbin-javascript">
var boton = document.querySelector("#bar"),
    imagenes = document.querySelectorAll(".foo"),
    total = imagenes.length;
 
boton.addEventListener("click", function(){
    for (var i = 0; i < total; i++){
        if (getComputedStyle(imagenes[i]).maxWidth == "400px"){
            imagenes[i].style.maxWidth = "120px";
        }
        else{
            imagenes[i].style.maxWidth = "400px";
        }
    }
}, false);
</script>
</body>
</html>
 

Solo tenias que borrar una imagen.

Este ejemplo sí funciona. Tengo que estudiarlo a ver si lo entiendo.
Funciona perfecto.

Muchísimas gracias.
Un saludo.

[Alexis88]

Iniciado por satanson123

Prueba asi:

Código HTML:

[...]
<img id="img-p" src="http://www.absolut-canada.com/wp-content/uploads/2009/09/pesca-en-quebec.jpg" title="Click para ver"> 
<img id="img-p" src="http://static3.absolutcaribe.com/wp-content/uploads/2009/09/playa-placencia.jpg" title="Click para ver">    
[...]
 

Nunca asignes el mismo id a más de un elemento dentro del mismo documento HTML, no es correcto pues se trata de un dato único e irrepetible.

Saludos