Guardar variable javascipt en funcion

erxaca · #1 (**permalink**) 13/03/2011, 09:58

Hola compañeros,

a una función js le paso unos parametros y además quiero guardar ese parametro para comprobarlo con el siguiente que se le pasa a la función pero no me lo guarda se queda undefined, el código es el siguiente:

Código HTML:

<html>
<head>
  <script type="text/javascript">
  <!--
    function cambiarValores(obj,prod) {
      var img = obj.src;
      img = img.split('/').pop();
      img = img == 'boton-bebidas-' + obj.name + '-off.png' ? 'images/boton-bebidas-' + obj.name + '-on.png' : 'images/boton-bebidas-' + obj.name + '-off.png';
      obj.src = img;
	  
      if(oldprod == prod) {
       var oldimg = document.getElementsByName(oldname)[0];
       oldimg.src = 'images/boton-bebidas-' + oldname + '-off.png';
      }
      //alert(oldprod);
      //alert(prod);
      var oldprod = prod;
      var oldname = obj.name;
    }
  //-->
  </script>
</head>
<body>

  <img src="images/boton-bebidas-1-off.png" name="1" alt="1" onclick="cambiarValores(this,'Coca-Cola')" />
   <input type="hidden" name="coca-cola-1" value="bebida" />

   <img src="images/boton-bebidas-2-off.png" name="2" alt="2" onclick="cambiarValores(this,'Coca-Cola')" />
    <input type="hidden" name="coca-cola-2" value="bebida" />

</body>
</html>

Si hacéis el alert a oldprod veréis que muestra undefined y no se queda guardado el valor que se asignó anteriormente y por ello no se cumple la condición del if. Por qué no se que guardado el valor en oldprod?

Saludos

maycolalvarez · #2 (**permalink**) 13/03/2011, 10:12

no te lo guarda porque lo estas declarando en la función, declararlo fuera para que tenga un ámbito global

:

Código Javascript:

Ver original<html>
<head>
  <script type="text/javascript">
  <!--
    //variables globales:
    var oldprod;
    var oldname;
    function cambiarValores(obj,prod) {
      var img = obj.src;
      img = img.split('/').pop();
      img = img == 'boton-bebidas-' + obj.name + '-off.png' ? 'images/boton-bebidas-' + obj.name + '-on.png' : 'images/boton-bebidas-' + obj.name + '-off.png';
      obj.src = img;
      
      if(oldprod == prod) {
       var oldimg = document.getElementsByName(oldname)[0];
       oldimg.src = 'images/boton-bebidas-' + oldname + '-off.png';
      }
      //alert(oldprod);
      //alert(prod);
      oldprod = prod;
      oldname = obj.name;
    }
  //-->
  </script>
</head>
<body>
 
  <img src="images/boton-bebidas-1-off.png" name="1" alt="1" onclick="cambiarValores(this,'Coca-Cola')" />
   <input type="hidden" name="coca-cola-1" value="bebida" />
 
   <img src="images/boton-bebidas-2-off.png" name="2" alt="2" onclick="cambiarValores(this,'Coca-Cola')" />
    <input type="hidden" name="coca-cola-2" value="bebida" />
 
</body>
</html>

erxaca · #3 (**permalink**) 13/03/2011, 12:10

Muchas gracias maycolalvarez, funcionó a la perfección ;)

erxaca · #4 (**permalink**) 13/03/2011, 14:10

Por cierto sabrias decirme porque no funciona si uso los alt para recoger los numeros y si funciona si uso el name en su lugar?

Código HTML:

<html>
<head>
  <script type="text/javascript">
  <!--
    var oldprod;
    var oldname;

    function cambiarValores(obj,prod) {
    var img = obj.src;
    img = img.split('/').pop();
    img = img == 'boton-bebidas-' + obj.alt + '-off.png' ? 'images/boton-bebidas-' + obj.alt + '-on.png' : 'images/boton-bebidas-' + obj.alt + '-off.png';
    obj.src = img;
    if(oldprod == prod) {
      var oldimg = document.getElementsByName(oldname)[0];
      oldimg.src = 'images/boton-bebidas-' + oldname + '-off.png';
    }
    //alert(oldprod);
    //alert(prod);
    oldprod = prod;
    oldname = obj.alt;
  //-->
  </script>
</head>
<body>

  <img src="images/boton-bebidas-1-off.png" alt="1" onclick="cambiarValores(this,'Coca-Cola')" />
  <input type="hidden" name="coca-cola-1" value="bebida" />
 
  <img src="images/boton-bebidas-2-off.png" alt="2" onclick="cambiarValores(this,'Coca-Cola')" />
  <input type="hidden" name="coca-cola-2" value="bebida" />
  
  <img src="images/boton-bebidas-1-off.png" alt="1" onclick="cambiarValores(this,'Fanta-Naranja')" />
  <input type="hidden" name="fanta-naranja-1" value="bebida" />

  <img src="images/boton-bebidas-2-off.png" alt="2" onclick="cambiarValores(this,'Fanta-Naranja')" />
  <input type="hidden" name="fanta-naranja-2" value="bebida" />

</body>
</html>

El problema del name es que no funciona si uso mas de un elemento con el mismo name y he de hacerlo. Tampoco funciona con id obviamente, por eso me decante por coger el valor de los alt pero no funcionan.

Saludos y gracias ;)

erxaca · #5 (**permalink**) 13/03/2011, 17:01

Vaya estudiando el código mas detenidamente me he dado cuenta en la línea var oldimg = document.getElementsByName(oldname)[0]; que intento acceder a un elemento con el name oldname pero claro no tienen ningún name asignado. Como entonces podría realziarlo?

erxaca · #6 (**permalink**) 13/03/2011, 17:14

bueno ya lo solucioné, usé nombres distintos, almaceno el name anterior y el alt que tiene el valor que se repite entre los elementos y listo. Dejo la solución por si le sirve a alguien, basicamente consiste en seleccionar una imagen que cambia al click y si se elije otra con el mismo parametro se desmarca la anterior y se cambia la nueva imagen:

Código HTML:

<html>
<head>
  <script type="text/javascript">
  <!--
    var oldprod, oldname, oldnum;
    function cambiarValores(obj,prod) {
    var img = obj.src;
    img = img.split('/').pop();
    img = img == 'boton-bebidas-' + obj.alt + '-off.png' ? 'images/boton-bebidas-' + obj.alt + '-on.png' : 'images/boton-bebidas-' + obj.alt + '-off.png';
    obj.src = img;
    if(oldprod == prod) {
      var oldimg = document.getElementsByName(oldname)[0];
      oldimg.src = 'images/boton-bebidas-' + oldname + '-off.png';
    }
    oldprod = prod;
    oldnum = obj.alt
    oldname = obj.name;
  //-->
  </script>
</head>
<body>

  <img src="images/boton-bebidas-1-off.png" name="c1" alt="1" onclick="cambiarValores(this,'Coca-Cola')" />
  <input type="hidden" name="coca-cola-1" value="bebida" />
 
  <img src="images/boton-bebidas-2-off.png" name="c2" alt="2" onclick="cambiarValores(this,'Coca-Cola')" />
  <input type="hidden" name="coca-cola-2" value="bebida" />
  
  <img src="images/boton-bebidas-1-off.png" name="f1" alt="1" onclick="cambiarValores(this,'Fanta-Naranja')" />
  <input type="hidden" name="fanta-naranja-1" value="bebida" />

  <img src="images/boton-bebidas-2-off.png" name="f2" alt="2" onclick="cambiarValores(this,'Fanta-Naranja')" />
  <input type="hidden" name="fanta-naranja-2" value="bebida" />

</body>
</html>