Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] usar la misma funcion mas de 1 vez

Estas en el tema de usar la misma funcion mas de 1 vez en el foro de Javascript en Foros del Web. Hola amigos me gustaria saber como puedo ejecutar la misma funcion mas de una ves. Ejemplo: tengo este simple codigo: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver ...
  #1 (permalink)  
Antiguo 21/11/2014, 16:59
Avatar de satanson123  
Fecha de Ingreso: julio-2012
Mensajes: 217
Antigüedad: 11 años, 7 meses
Puntos: 2
usar la misma funcion mas de 1 vez

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

Ejemplo:

tengo este simple codigo:

Código HTML:
Ver original
  1. <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:
Ver original
  1. function big_img(){
  2.       var img=document.getElementById('img-p');
  3.       if(img.style.maxWidth=="400px"){
  4.       img.style.maxWidth="120px";
  5.       }else{
  6.       img.style.maxWidth="400px";
  7.       }
  8.      
  9.  
  10.       }

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?
  #2 (permalink)  
Antiguo 21/11/2014, 17:05
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Respuesta: usar la misma funcion mas de 1 vez

Hola:

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

Código Javascript:
Ver original
  1. function big_img(imagen){
  2.       var img=document.getElementById(imagen);
  3.       if(img.style.maxWidth=="400px"){
  4.       img.style.maxWidth="120px";
  5.       }else{
  6.       img.style.maxWidth="400px";
  7. }

y la llamada:

Código Javascript:
Ver original
  1. onclick="big_img(this.id);"

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 21/11/2014, 17:27
Avatar de satanson123  
Fecha de Ingreso: julio-2012
Mensajes: 217
Antigüedad: 11 años, 7 meses
Puntos: 2
Respuesta: usar la misma funcion mas de 1 vez

Cita:
Iniciado por caricatos Ver Mensaje
Hola:

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

Código Javascript:
Ver original
  1. function big_img(imagen){
  2.       var img=document.getElementById(imagen);
  3.       if(img.style.maxWidth=="400px"){
  4.       img.style.maxWidth="120px";
  5.       }else{
  6.       img.style.maxWidth="400px";
  7. }

y la llamada:

Código Javascript:
Ver original
  1. 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?
  #4 (permalink)  
Antiguo 22/11/2014, 01:03
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Respuesta: usar la misma funcion mas de 1 vez

Hola:

Cita:
Iniciado por satanson123 Ver Mensaje
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

Cita:
Iniciado por satanson123 Ver Mensaje
... 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:
Ver original
  1. function big_img(img){
  2.       //var img=document.getElementById(imagen);
  3. // ...

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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #5 (permalink)  
Antiguo 22/11/2014, 01:05
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
Respuesta: usar la misma funcion mas de 1 vez

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:
Ver original
  1. <img src = "imagen1.jpg" class = "foo" />
  2. <img src = "imagen2.jpg" class = "foo" />
  3. <img src = "imagen3.jpg" class = "foo" />
  4.  
  5. <button id = "bar">Cambiar tamaño de imágenes</button>

Código Javascript:
Ver original
  1. var boton = document.querySelector("#bar"),
  2.     imagenes = document.querySelectorAll(".foo"),
  3.     total = imagenes.length;
  4.  
  5. boton.addEventListener("click", function(){
  6.     for (var i = 0; i < total; i++){
  7.         if (getComputedStyle(imagenes[i]).maxWidth == "400px"){
  8.             imagenes[i].style.maxWidth = "120px";
  9.         }
  10.         else{
  11.             imagenes[i].style.maxWidth = "400px";
  12.         }
  13.     }
  14. }, false);

DEMO

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

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #6 (permalink)  
Antiguo 22/11/2014, 01:15
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Respuesta: usar la misma funcion mas de 1 vez

Hola:

Cita:
Iniciado por Alexis88 Ver Mensaje
...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:

Cita:
Iniciado por satanson123 Ver Mensaje
... Como haría para que se amplíe a la imagen que le de click?
Creo que no es lo que se pide

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #7 (permalink)  
Antiguo 22/11/2014, 01:36
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
Respuesta: usar la misma funcion mas de 1 vez

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
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Última edición por Alexis88; 22/11/2014 a las 02:06 Razón: Tired!
  #8 (permalink)  
Antiguo 22/11/2014, 02:50
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 13 años, 2 meses
Puntos: 206
Respuesta: usar la misma funcion mas de 1 vez

Código HTML:
Ver original
  1. <img onclick="big_img(this);" id="img-p" src='$1' title="Click para ver">

Código Javascript:
Ver original
  1. function big_img(img){
  2.       if(img.style.maxWidth=="400px"){
  3.       img.style.maxWidth="120px";
  4.       }else{
  5.       img.style.maxWidth="400px";
  6.       }
  7.      
  8.  
  9.       }
Código idéntico, pero usando "this".

PD. Releyendo, ésto ya te lo han dicho.
  #9 (permalink)  
Antiguo 22/11/2014, 06:32
Avatar de satanson123  
Fecha de Ingreso: julio-2012
Mensajes: 217
Antigüedad: 11 años, 7 meses
Puntos: 2
Respuesta: usar la misma funcion mas de 1 vez

Cita:
Iniciado por marlanga Ver Mensaje
Código HTML:
Ver original
  1. <img onclick="big_img(this);" id="img-p" src='$1' title="Click para ver">

Código Javascript:
Ver original
  1. function big_img(img){
  2.       if(img.style.maxWidth=="400px"){
  3.       img.style.maxWidth="120px";
  4.       }else{
  5.       img.style.maxWidth="400px";
  6.       }
  7.      
  8.  
  9.       }
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);"
  #10 (permalink)  
Antiguo 22/11/2014, 08:16
 
Fecha de Ingreso: noviembre-2014
Mensajes: 15
Antigüedad: 9 años, 4 meses
Puntos: 1
Respuesta: usar la misma funcion mas de 1 vez

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:
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>Ejemplo- FDW</title>
  6.  
  7. <script>
  8. function big_img(){
  9.       var img=document.getElementById('img-p');
  10.       if(img.style.maxWidth=="400px"){
  11.       img.style.maxWidth="120px";
  12.       }else{
  13.       img.style.maxWidth="400px";
  14.       }
  15.       }
  16. </script>
  17.  
  18. </head>
  19.  
  20. <body>
  21.   <div>
  22.     <button id = "bar" onclick="big_img(this)">Cambiar tamaño de imágenes</button>
  23.   </div>
  24.  
  25.     <img " id="img-p" src="http://www.absolut-canada.com/wp-content/uploads/2009/09/pesca-en-quebec.jpg" title="Click para ver">
  26.     <img " id="img-p" src="http://static3.absolutcaribe.com/wp-content/uploads/2009/09/playa-placencia.jpg" title="Click para ver">    
  27.  
  28. </body>
  29. </html>
  #11 (permalink)  
Antiguo 22/11/2014, 12:38
Avatar de satanson123  
Fecha de Ingreso: julio-2012
Mensajes: 217
Antigüedad: 11 años, 7 meses
Puntos: 2
Respuesta: usar la misma funcion mas de 1 vez

Cita:
Iniciado por javier_u Ver Mensaje
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:
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>Ejemplo- FDW</title>
  6.  
  7. <script>
  8. function big_img(){
  9.       var img=document.getElementById('img-p');
  10.       if(img.style.maxWidth=="400px"){
  11.       img.style.maxWidth="120px";
  12.       }else{
  13.       img.style.maxWidth="400px";
  14.       }
  15.       }
  16. </script>
  17.  
  18. </head>
  19.  
  20. <body>
  21.   <div>
  22.     <button id = "bar" onclick="big_img(this)">Cambiar tamaño de imágenes</button>
  23.   </div>
  24.  
  25.     <img " id="img-p" src="http://www.absolut-canada.com/wp-content/uploads/2009/09/pesca-en-quebec.jpg" title="Click para ver">
  26.     <img " id="img-p" src="http://static3.absolutcaribe.com/wp-content/uploads/2009/09/playa-placencia.jpg" title="Click para ver">    
  27.  
  28. </body>
  29. </html>
Hola mas arriba nuestro querido amigo Alexis88 tiene un ejemplo con 3 imagenes seguro que con ese ejemplo te funciona.
  #12 (permalink)  
Antiguo 22/11/2014, 14:45
 
Fecha de Ingreso: noviembre-2014
Mensajes: 15
Antigüedad: 9 años, 4 meses
Puntos: 1
Respuesta: usar la misma funcion mas de 1 vez

Cita:
Iniciado por satanson123 Ver Mensaje
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:
Ver original
  1. <img src = "imagen1.jpg" class = "foo" />
  2. <img src = "imagen2.jpg" class = "foo" />
  3. <img src = "imagen3.jpg" class = "foo" />
  4.  
  5. <button id = "bar">Cambiar tamaño de imágenes</button>


Código Javascript:
Ver original
  1. var boton = document.querySelector("#bar"),
  2.     imagenes = document.querySelectorAll(".foo"),
  3.     total = imagenes.length;
  4.  
  5. boton.addEventListener("click", function(){
  6.     for (var i = 0; i < total; i++){
  7.         if (getComputedStyle(imagenes[i]).maxWidth == "400px"){
  8.             imagenes[i].style.maxWidth = "120px";
  9.         }
  10.         else{
  11.             imagenes[i].style.maxWidth = "400px";
  12.         }
  13.     }
  14. }, false);


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

Código Javascript:
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>Ejemplo- FDW</title>
  6.  
  7. <script>
  8. function big_img(){
  9.       var img=document.getElementById('img-p');
  10.       if(img.style.maxWidth=="400px"){
  11.       img.style.maxWidth="120px";
  12.       }else{
  13.       img.style.maxWidth="400px";
  14.       }
  15.       }
  16. </script>
  17.  
  18. </head>
  19.  
  20. <body>
  21.   <div>
  22.     <button id = "bar" onclick="big_img(this)">Cambiar tamaño de imágenes</button>
  23.   </div>
  24.  
  25.     <img " id="img-p" src="http://www.absolut-canada.com/wp-content/uploads/2009/09/pesca-en-quebec.jpg" title="Click para ver">
  26.     <img " id="img-p" src="http://static3.absolutcaribe.com/wp-content/uploads/2009/09/playa-placencia.jpg" title="Click para ver">    
  27.  
  28. </body>
  29. </html>

Si alguien puede decirme se lo agradezco mucho. Un saludo.
  #13 (permalink)  
Antiguo 22/11/2014, 15:45
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
Respuesta: usar la misma funcion mas de 1 vez

Cita:
Iniciado por satanson123 Ver Mensaje
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
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #14 (permalink)  
Antiguo 22/11/2014, 16:50
Avatar de satanson123  
Fecha de Ingreso: julio-2012
Mensajes: 217
Antigüedad: 11 años, 7 meses
Puntos: 2
Respuesta: usar la misma funcion mas de 1 vez

Cita:
Iniciado por javier_u Ver Mensaje
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:
Ver original
  1. <img src = "imagen1.jpg" class = "foo" />
  2. <img src = "imagen2.jpg" class = "foo" />
  3. <img src = "imagen3.jpg" class = "foo" />
  4.  
  5. <button id = "bar">Cambiar tamaño de imágenes</button>


Código Javascript:
Ver original
  1. var boton = document.querySelector("#bar"),
  2.     imagenes = document.querySelectorAll(".foo"),
  3.     total = imagenes.length;
  4.  
  5. boton.addEventListener("click", function(){
  6.     for (var i = 0; i < total; i++){
  7.         if (getComputedStyle(imagenes[i]).maxWidth == "400px"){
  8.             imagenes[i].style.maxWidth = "120px";
  9.         }
  10.         else{
  11.             imagenes[i].style.maxWidth = "400px";
  12.         }
  13.     }
  14. }, false);


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

Código Javascript:
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>Ejemplo- FDW</title>
  6.  
  7. <script>
  8. function big_img(){
  9.       var img=document.getElementById('img-p');
  10.       if(img.style.maxWidth=="400px"){
  11.       img.style.maxWidth="120px";
  12.       }else{
  13.       img.style.maxWidth="400px";
  14.       }
  15.       }
  16. </script>
  17.  
  18. </head>
  19.  
  20. <body>
  21.   <div>
  22.     <button id = "bar" onclick="big_img(this)">Cambiar tamaño de imágenes</button>
  23.   </div>
  24.  
  25.     <img " id="img-p" src="http://www.absolut-canada.com/wp-content/uploads/2009/09/pesca-en-quebec.jpg" title="Click para ver">
  26.     <img " id="img-p" src="http://static3.absolutcaribe.com/wp-content/uploads/2009/09/playa-placencia.jpg" title="Click para ver">    
  27.  
  28. </body>
  29. </html>

Si alguien puede decirme se lo agradezco mucho. Un saludo.
Prueba asi:

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2.   <meta charset="utf-8">
  3.   <title>Ejemplo- FDW</title>
  4.  <style>
  5. #img-p{
  6. max-width: 120px;
  7. }
  8. function big_img(){
  9.       var img=document.getElementById('img-p');
  10.       if(img.style.maxWidth=="400px"){
  11.       img.style.maxWidth="120px";
  12.       }else{
  13.       img.style.maxWidth="400px";
  14.       }
  15.       }
  16.  
  17. </head>
  18.  
  19.   <div>
  20.     <button id="bar" onclick="big_img();">Cambiar tamaño de imágenes</button>
  21.   </div>
  22.  
  23.     <img id="img-p" src="http://www.absolut-canada.com/wp-content/uploads/2009/09/pesca-en-quebec.jpg" title="Click para ver">
  24.     <img id="img-p" src="http://static3.absolutcaribe.com/wp-content/uploads/2009/09/playa-placencia.jpg" title="Click para ver">    
  25.  
  26. </body>
  27. </html>

  #15 (permalink)  
Antiguo 22/11/2014, 17:23
 
Fecha de Ingreso: noviembre-2014
Mensajes: 15
Antigüedad: 9 años, 4 meses
Puntos: 1
Respuesta: usar la misma funcion mas de 1 vez

Cita:
Iniciado por satanson123 Ver Mensaje
Prueba asi:

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2.   <meta charset="utf-8">
  3.   <title>Ejemplo- FDW</title>
  4.  <style>
  5. #img-p{
  6. max-width: 120px;
  7. }
  8. function big_img(){
  9.       var img=document.getElementById('img-p');
  10.       if(img.style.maxWidth=="400px"){
  11.       img.style.maxWidth="120px";
  12.       }else{
  13.       img.style.maxWidth="400px";
  14.       }
  15.       }
  16.  
  17. </head>
  18.  
  19.   <div>
  20.     <button id="bar" onclick="big_img();">Cambiar tamaño de imágenes</button>
  21.   </div>
  22.  
  23.     <img id="img-p" src="http://www.absolut-canada.com/wp-content/uploads/2009/09/pesca-en-quebec.jpg" title="Click para ver">
  24.     <img id="img-p" src="http://static3.absolutcaribe.com/wp-content/uploads/2009/09/playa-placencia.jpg" title="Click para ver">    
  25.  
  26. </body>
  27. </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.
  #16 (permalink)  
Antiguo 22/11/2014, 17:33
Avatar de satanson123  
Fecha de Ingreso: julio-2012
Mensajes: 217
Antigüedad: 11 años, 7 meses
Puntos: 2
Respuesta: usar la misma funcion mas de 1 vez

Cita:
Iniciado por javier_u Ver Mensaje
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:
Ver original
  1. <!DOCTYPE html>
  2. <!--
  3. Created using JS Bin
  4. http://jsbin.com
  5.  
  6. Copyright (c) 2014 by anonymous (http://jsbin.com/mukaxowufu/1/edit)
  7.  
  8. Released under the MIT license: http://jsbin.mit-license.org
  9. -->
  10. <meta name="robots" content="noindex">
  11.   <meta charset="utf-8">
  12.   <title>Ejemplo- FDW</title>
  13. <style id="jsbin-css">
  14. #bar{
  15.     display: block;
  16. }
  17.  
  18. .foo{
  19.     max-width: 400px;
  20. }
  21. </head>
  22.     <button id = "bar">Cambiar tamaño de imágenes</button>  
  23.  
  24.     <img src = "http://www.absolut-canada.com/wp-content/uploads/2009/09/pesca-en-quebec.jpg" class = "foo" />
  25.     <img src = "http://static3.absolutcaribe.com/wp-content/uploads/2009/09/playa-placencia.jpg" class = "foo" />
  26. <script id="jsbin-javascript">
  27. var boton = document.querySelector("#bar"),
  28.     imagenes = document.querySelectorAll(".foo"),
  29.     total = imagenes.length;
  30.  
  31. boton.addEventListener("click", function(){
  32.     for (var i = 0; i < total; i++){
  33.        if (getComputedStyle(imagenes[i]).maxWidth == "400px"){
  34.            imagenes[i].style.maxWidth = "120px";
  35.        }
  36.        else{
  37.            imagenes[i].style.maxWidth = "400px";
  38.        }
  39.    }
  40. }, false);
  41. </body>
  42. </html>

Solo tenias que borrar una imagen.
  #17 (permalink)  
Antiguo 22/11/2014, 17:45
 
Fecha de Ingreso: noviembre-2014
Mensajes: 15
Antigüedad: 9 años, 4 meses
Puntos: 1
Respuesta: usar la misma funcion mas de 1 vez

Cita:
Iniciado por satanson123 Ver Mensaje
Usa el mismo ejemplo que te comente mas arriba:

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <!--
  3. Created using JS Bin
  4. http://jsbin.com
  5.  
  6. Copyright (c) 2014 by anonymous (http://jsbin.com/mukaxowufu/1/edit)
  7.  
  8. Released under the MIT license: http://jsbin.mit-license.org
  9. -->
  10. <meta name="robots" content="noindex">
  11.   <meta charset="utf-8">
  12.   <title>Ejemplo- FDW</title>
  13. <style id="jsbin-css">
  14. #bar{
  15.     display: block;
  16. }
  17.  
  18. .foo{
  19.     max-width: 400px;
  20. }
  21. </head>
  22.     <button id = "bar">Cambiar tamaño de imágenes</button>  
  23.  
  24.     <img src = "http://www.absolut-canada.com/wp-content/uploads/2009/09/pesca-en-quebec.jpg" class = "foo" />
  25.     <img src = "http://static3.absolutcaribe.com/wp-content/uploads/2009/09/playa-placencia.jpg" class = "foo" />
  26. <script id="jsbin-javascript">
  27. var boton = document.querySelector("#bar"),
  28.     imagenes = document.querySelectorAll(".foo"),
  29.     total = imagenes.length;
  30.  
  31. boton.addEventListener("click", function(){
  32.     for (var i = 0; i < total; i++){
  33.        if (getComputedStyle(imagenes[i]).maxWidth == "400px"){
  34.            imagenes[i].style.maxWidth = "120px";
  35.        }
  36.        else{
  37.            imagenes[i].style.maxWidth = "400px";
  38.        }
  39.    }
  40. }, false);
  41. </body>
  42. </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.
  #18 (permalink)  
Antiguo 22/11/2014, 17:52
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
Respuesta: usar la misma funcion mas de 1 vez

Cita:
Iniciado por satanson123 Ver Mensaje
Prueba asi:
Código HTML:
Ver original
  1. [...]
  2. <img id="img-p" src="http://www.absolut-canada.com/wp-content/uploads/2009/09/pesca-en-quebec.jpg" title="Click para ver">
  3. <img id="img-p" src="http://static3.absolutcaribe.com/wp-content/uploads/2009/09/playa-placencia.jpg" title="Click para ver">    
  4. [...]
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
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Etiquetas: funcion, usar, vez
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:54.