Pasar parametros a funcion javascript

erxaca · #1 (**permalink**) 15/02/2011, 14:46

Hola compañeros,

tengo una pequeña duda, mediante el evento onclick de una imagen cambio la imagen pero a la vez quiero cambiar el value de un input con el mismo name, ¿como indico en el javascript que cambie el value del input que quiero pasarle por por parametros y como le paso ese name?

Código PHP:

  <html><head>

  <script type="text/javascript">

    function cambiarFoto() {

      document.getElementsByName('pizzas').src = document.getElementsByName('pizzas').src == 'images/pizzas-off.png' ? 'images/pizzas-off.png' : 'images/pizzas-on.png';

      document.getElementById('pizzas').value = document.getElementById('pizzas').value == 'no' ? 'si' :'no';

    }

  </script>

</head>

<body>

  <form action="prueba.html" method="get">

    <img src="images/pizzas-off.png" name="pizzas" onclick="cambiarFoto();" />

    <input type="hidden" name="pizzas" id="pizzas" value="no" />

    <input type="submit" value="Enviar" />

  </form>

</body></html>

posman · #2 (**permalink**) 15/02/2011, 15:05

No debes de llamar a 2 elementos con el mismo nombre

erxaca · #3 (**permalink**) 15/02/2011, 15:21

Como le podría indicar el name del img y del input correspondiente?

Saludos

ndenitt · #4 (**permalink**) 15/02/2011, 15:57

no se si es lo que vos andas buscando, no pude entender bien tu problema

<html>
<head>
<script type="text/javascript">

// Acá recibis el parametro que contiene el nombre de la imagen a la cual le hiciste click y le asigna el nombre de id.

function cambiarFoto(id) {

//cambias la imagen a la que le hiciste click.
document.getElementsByName(id).src = document.getElementsByName(id).src == 'images/pizzas-off.png' ? 'images/pizzas-off.png' : 'images/pizzas-on.png';

//y cambias el valor de un input que posea como ID el mismo valor que el NAME de la img.

document.getElementById(id).value = document.getElementById(id).value == 'no' ? 'si' :'no';
}
</script>
</head>
<body>
<form action="prueba.html" method="get">

//Acá cuando llamas la funcion, le decis que como parámetro envíe el nombre de esa misma imagen. Arriba se obtiene el dato. por ejemplo en este caso "pizzas"

<img src="images/pizzas-off.png" name="pizzas" onclick="cambiarFunoto(this.name);" />

// luego vos tenes que tener un input con un ID igual al NAME de la imagen

<input name="pizzas" id="pizzas" value="no" />

<br/>
<br/>

// y en este caso se obtendria "pizzas2"
<img src="images/pizzas-off.png" name="pizzas2" onclick="cambiarFoto(this.name);" />

<input name="pizzas" id="pizzas2" value="no" />

<br/>
<br/>

<input type="submit" value="Enviar" />
</form>
</body>
</html>

Le quite el hidden para poder ver los resultados
miralo en [URL="http://www.estudiocristal.com.ar/test.html"]http://www.estudiocristal.com.ar/test.html[/URL]

enrique4480 · #5 (**permalink**) 15/02/2011, 16:03

tal como lo tienes yo usaria un parametro que seria "this" que seria la propia imagen y luego haces uso de nextSibling por ejemplo para acceder al siguiente elemento.

erxaca · #6 (**permalink**) 15/02/2011, 16:57

Gracias a ambos, podrias indicarme algun ejemplo de nextSibling enrique4480?

ndenitt, tu idea funciona bien en el primer click ya que el value se iguala a si pero si se le da otro click no cambia a no, he comprobado que se necesita dar 2 clicks para que vuelva a no el value, porque puede ocurrir? por cierto el codigo js que puse para cambiar la imagen no vale y ahora estoy usando uno que me propuso un compañero del foro aunque la imagen solo se cambia en el primer click:

Código PHP:

  <html>

<head>

  <link href="css/estilo.css" rel="stylesheet" type="text/css" />

  <script type="text/javascript">

    function cambiarFoto(img,id){

      img.src = img.src == 'images/pizzas-off.png' ? 'images/pizzas-off.png' : 'images/pizzas-on.png';

      document.getElementById(id).value = document.getElementById(id).value == 'no' ? 'si' :'no';

    }

  </script>

</head><body>

 
   <img src="images/pizzas-off.png" name="pizzas" onclick="cambiarFoto(this,this.name);" />

    <input type="hidden" name="pizzas" id="pizzas" value="no" />

 
</body></html>

enrique4480 · #7 (**permalink**) 15/02/2011, 17:50

Código Javascript:

Ver original<html> 
<head> 
  <link href="css/estilo.css" rel="stylesheet" type="text/css" /> 
  <script type="text/javascript"> 
    function cambiarFoto(o){ 
      var x = o.src
      x = x.split("/").pop();
      x = x === "off.png" ? "on.png" : "off.png";
      o.src = x;
      o = o.nextSibling.nextSibling;
      o.value = o.value === "no" ? "si" : "no";
    } 
  </script> 
</head><body> 
 
   <img src="off.png" name="pizzas" onclick="cambiarFoto(this);" /> 
    <input type="hidden" name="pizzas" id="pizzas" value="no" /> 
 
</body></html>

es solo un ejemplo pero funciona. el uso de split es para limpiar el src y el pop saca el ultimo elemento que es el que interesa (el nombre de la imagen).

erxaca · #8 (**permalink**) 15/02/2011, 18:17

enrique4480 muchisimas gracias por enseñarme el nextSibling, además funciona perfectamente.

Tengo una duda en esta parte

Código PHP:

  o = o.nextSibling.nextSibling;

Si con o nextSibling se accede al siguiente elemento, porque accedes al siguiente del siguiente?

Saludos

enrique4480 · #9 (**permalink**) 15/02/2011, 18:28

hay un objeto Text antes del input.

erxaca · #10 (**permalink**) 15/02/2011, 19:03

Gracias de nuevo ;)

enrique4480 · #11 (**permalink**) 15/02/2011, 19:06

No hay de que ;).

ndenitt · #12 (**permalink**) 15/02/2011, 20:40

no se bien que es lo que vos intentas realizar.

Con lo que vos explicaste al comienzo y según lo que vi en tu codigo es que vos al hacer un click sobre la imagen necesitas que el value cambie a si, y si le volves a hacer click, el value cambia a no nuevamente, y asi susesivamente,
por que evalua que el value sea igual a no, de ser cierto cambia por si, y si es diferente a no vuelve a ser no.

Lo mismo sucede con las imagenes !

En el link que te pase anteriormente funciona asi. Y las imagenes no cambia por que esta mal el codigo que pusiste al principio.

Ahi lo arregle y funciona todo ok. Los dos codigos estan bien y funcionan igual, solo que con la opcion de "nextSibling" no podes colocar nada en medio pq dejaria de funcionar.

Con el script que yo ofrezco funciona de cualquier manera.

Sin nextSibling en www.estudiocristal.com.ar/test.html

con nextSibling en www.estudiocristal.com.ar/test2.html

Tomate unos segundos y checkea los dos links y nota la diferencia, si es un proyecto complejo te va a convenir sin nextSibling ya que podes colocarlos donde sea que funciona igual y mas adelante te va a limitar mucho !

Espero que te sirvan los dos ejemplos. Avisame como te fue ! aparte asi saco los archivos de mi web.

Saludos, nitt!

enrique4480 · #13 (**permalink**) 16/02/2011, 05:27

Cita:

Con el script que yo ofrezco funciona de cualquier manera.

Una pequeña modificacion para que funcione sin ser el elemento inmediato a "this". aun asi no funcionaria en todos los casos ya que otro input tal como esta el codigo ahora afectaria, pero se puede adaptar sin mucho mas codigo. ¿ventajas? yo tendria solo que adaptar la funcion y en tu caso tendrias que adaptar un numero indeterminado de elementos que tendrian que estar vinculados mediante name=id. eso ya es cuestion de gustos, pero si de mantenimiento hablamos prefiero solo modificar una funcion. como ejemplo quita el name y el id y veras que ese script deja de funcionar, ahora quitalo en mi codigo y veras que continua funcionando, todo tiene sus pros y sus contras.

Código Javascript:

Ver originalfunction cambiarFoto(o){ 
      var x = o.src
      x = x.split("/").pop();
      x = x === "off.png" ? "on.png" : "off.png";
      o.src = x;
      o = o.nextSibling;
      while(!o.type)
      {
       o = o.nextSibling;
      }
      o.value = o.value === "no" ? "si" : "no";
    }