Como incrementar en 1 al hacer click dentro de un div. para luego poder enviar dato

FantasyMaker · #1 (**permalink**) 20/11/2011, 15:47

Holas, el tema es el siguiente: tengo un div. que puede o no llevar una imagen de sustitucion para que destaque al pasar el mouse por encima. en fin... lo que pretendo es lo siguiente.. necesito que al hacer click en el div (es pequeño 20px x 20 px ) parezca un "1" y al hacer click denuevo aparezca un "2" y asi vaya sumando cada vez que lo clicke.. con un tope de 5 por ejemplo... eso.. aver si alguien me puede ayudar.. he intentado hacerlo con un for.. el cual logicamente funciona como tal el problema es que con javascript probé la opción document.write.. pero no se como imprimir el numero dentro del div.. aver si alguien sabe como hacerlo con javascript o en su efecto con php..

La idea es que ese valor que se imprima en el div .. despues pueda recogerlo para enviar a una tabla con mysql.

de antemano muchisimas gracias.. saludos!

Kaopectate · #2 (**permalink**) 20/11/2011, 19:22

Hola FantasyMaker.

Te propongo una solución JavaScript (tal vez algún moderador decida reubicar este hilo)

Código PHP:

  <html> 
 <head> 
  <script language='javascript'> 
 
   function suma(){ 
    var cuenta = parseInt(document.frm.counter.value); 
    document.getElementById('mas1').innerHTML = cuenta + 1; 
    document.frm.counter.value = cuenta + 1; 
   } 
 
  </script> 
 </head> 
 <body> 
  <form name='frm'> 
   <div id='mas1' style='width: 50; height: 50; color: #ff0000; background-color: #cccccc' onclick='suma()'> 
   </div> 
   <input type='hidden' name='counter' value='0'> 
  </form> 
 </body> 
</html>

Saludos.

FantasyMaker · #3 (**permalink**) 20/11/2011, 19:47

vale compipa.. se paso... MUCHISIMAS GRACIAS!!!

Kaopectate · #4 (**permalink**) 20/11/2011, 20:17

Solo falta ver que algún moderador mueva esto a Javascript donde debería estar.

Me alegra haberte ayudado.

Saludos.

FantasyMaker · #5 (**permalink**) 05/01/2012, 18:50

Alguien sabrá como hacer esa misma funcion en PHP ??? ya que he intentado muchas cosas y aun me envia el dato predeterminado del value "0" o alguna forma de que me recoja el nuevo valor que entrega la function?... por favor..

gracias.

FantasyMaker · #6 (**permalink**) 10/01/2012, 13:09

Cita:

Iniciado por Kaopectate

Hola FantasyMaker.

Te propongo una solución JavaScript (tal vez algún moderador decida reubicar este hilo)

Código PHP:

  <html> 
 <head> 
  <script language='javascript'> 
 
   function suma(){ 
    var cuenta = parseInt(document.frm.counter.value); 
    document.getElementById('mas1').innerHTML = cuenta + 1; 
    document.frm.counter.value = cuenta + 1; 
   } 
 
  </script> 
 </head> 
 <body> 
  <form name='frm'> 
   <div id='mas1' style='width: 50; height: 50; color: #ff0000; background-color: #cccccc' onclick='suma()'> 
   </div> 
   <input type='hidden' name='counter' value='0'> 
  </form> 
 </body> 
</html>

Saludos.

Sabes... he implementado esto... funciona.. casi casi casi perfecto... el unico pequeño GRAN PROBLEMA es que al enviar el dato del del form me envia un "0" presumo que es el valor inicial que le hemos dado y en estricto rigor la funcion no modifica el value realmente.. por que?... no se.. es lo que intento descubrir.. ya que si bien el InnerHTML si me muestra el valor correcto segun los clik .. el value que se envia .. siempre es el 0 .. AYUDA PORFAVOR..

ihmps · #7 (**permalink**) 10/01/2012, 13:38

Cita:

Iniciado por FantasyMaker

Sabes... he implementado esto... funciona.. casi casi casi perfecto... el unico pequeño GRAN PROBLEMA es que al enviar el dato del del form me envia un "0" presumo que es el valor inicial que le hemos dado y en estricto rigor la funcion no modifica el value realmente.. por que?... no se.. es lo que intento descubrir.. ya que si bien el InnerHTML si me muestra el valor correcto segun los clik .. el value que se envia .. siempre es el 0 .. AYUDA PORFAVOR..

El problema en tu código es que le das value='0', es decir, ese campo siempre será "0" a menos que le cambies el valor por el que necesitas.

FantasyMaker · #8 (**permalink**) 11/01/2012, 09:19

Cita:

Iniciado por ihmps

El problema en tu código es que le das value='0', es decir, ese campo siempre será "0" a menos que le cambies el valor por el que necesitas.

gracias por tu respuesta.

lo se.. es ahi el problema.. esta solucion me la dieron aqui en el foro.. lo que necesito es poder modificar el value en tiempo real para luego enviarlo... al parecer no se puede?

el_quick · #9 (**permalink**) 11/01/2012, 09:29

Eso quiere decir que no has adaptado correctamente estas 2 líneas de la propuesta de Kaopectate:

Código Javascript:

Ver originaldocument.frm.counter.value = cuenta + 1;

Código Javascript:

Ver original<input type='hidden' name='counter' value='0'>

Recuerda que él solo puso un ejemplo FUNCIONAL, de ti depende adaptarlo correctamente a tu código.