elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Guía actualizada para evitar que un ransomware ataque tu empresa


+  Foro de elhacker.net
|-+  Programación
| |-+  Scripting
| | |-+  javascript		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: javascript  (Leído 3,358 veces)
Dawman

Desconectado Desconectado

Mensajes: 16


Ver Perfil
javascript
« en: 30 Septiembre 2013, 23:03 pm »
Hola,
Estoy ententando crear un script para pintar las celdas de una tabla con los colores que el usuario seleciona, cada colo se ira repitiendo tantas veces como el usurio marca... he hecho algo per no me funiona!
necesito vuestra ayuda!! gracias
Código
  2. 	<head>
  3. 		<title> Pràctica I </title>
  4. 		<link rel="stylesheet" href="css.css"></style>
  5. 		<meta HTTP-EQUIV="CONTENT-TYPE" content="text/html; charset=UTF-8"/>		
  6.         <script>            // generar taula           
  7.             function crearTaula()
  8.             {
  9.                 var fons1 = document.getElementById("color1").value;
  10.                 var fons2 = document.getElementById("color2").value;
  11.                 var fons3 = document.getElementById("color3").value;
  12.                 var val1 = document.getElementById("valor1").value;
  13.                 var val2 = document.getElementById("valor2").value;
  14.                 var val3 = document.getElementById("valor3").value;
  15.                 var v1 = val1;
  16.                 var v2 = val2;
  17.                 var v3 = val3;
  18.                 var cont = 0;
  19.                 var gran = false;
  20.                 document.write("<table>");
  21.                 for (i = 0; i < 20; i++) // per generar files
  22.                 {
  23.                     document.write("<tr>");
  24.                     for (j = 0; j < 20;  j++) // per generar cel·les 
  25.                     {
  26.                         if (!gran) {
  27.                             cont = val1;
  28.                             val1 = val2;
  29.                             val2 = val3;
  30.                             val3 = cont;
  31.                             x = 0;
  32.                         }
  33.                         for (x; x < cont; x++) // valor primer input...
  34.                         {
  35.                             if (cont == v1) document.write("<td bgcolor=\"" + fons1 + "\"></td>")
  36.                             else if (cont == v2) document.write("<td bgcolor=\"" + fons2 + "\"></td>")
  37.                             else if (cont == v3) document.write("<td bgcolor=\"" + fons3 + "\"></td>")    
  38.                         }
  39.  
  40.                         if (j >= 20)
  41.                         {
  42.                             gran = true;
  43.                             break;
  44.                         }           
  45.                     }
  46.                     document.write("</tr>");
  47.                 }
  48.                 document.write("</table>");
  49.             }
  50. 	</script>
  51. 	</head>      
  52. 	<body>       	
  53. 		<h1>PRÀCTICA 1</h1>				
  54. 		<select id="color1">
  55.             <option value="red">Vermell</option>
  56.             <option value="green">Verd</option>
  57.             <option value="blue">Blau</option>
  58.             <option value="yellow">Groc</option>
  59.             <option value="orange">Taronja</option>
  60.             <option value="purple">Magenta</option>
  61.             <option value="cyan">Cian</option>
  62. 		</select>
  63.         <input id="valor1"> repeticions<br />        
  64.         <select id="color2">
  65.             <option value="red">Vermell</option>
  66.             <option value="green">Verd</option>
  67.             <option value="blue">Blau</option>
  68.             <option value="yellow">Groc</option>
  69.             <option value="orange">Taronja</option>
  70.             <option value="purple">Magenta</option>
  71.             <option value="cyan">Cian</option>
  72. 		</select>
  73.          <input id="valor2"> repeticions<br />	       
  74.         <select id="color3">
  75.             <option value="red">Vermell</option>
  76.             <option value="green">Verd</option>
  77.             <option value="blue">Blau</option>
  78.             <option value="yellow">Groc</option>
  79.             <option value="orange">Taronja</option>
  80.             <option value="purple">Magenta</option>
  81.             <option value="cyan">Cian</option>
  82. 		</select>
  83.         <input id="valor3"> repeticions<br />		
  84.         <button onClick="crearTaula();">Pintar</button>
  85.  
  86.     </body>
  87. </html>


[MOD]: USA LAS ETIQUETAS PARA INSERTAR CÓDIGO
« Última modificación: 1 Octubre 2013, 09:16 am por EleKtro H@cker » En línea
Almapa

Desconectado Desconectado

Mensajes: 111


Ver Perfil
Re: javascript
« Respuesta #1 en: 1 Octubre 2013, 14:08 pm »
Supose que hi haurà prou gent del foro que no entendrà els teus comentaris en català XD.

Para empezar destacar que la variable "gran" es totalmente inútil, pues el bucle se va a parar cuando j<20 y, siendo el bucle for el que incrementa el valor de j, nunca se va a dar el caso de que  j>=20 a no ser que le insertes una línea en que le varíes tu el valor.

Bueno, a mi si que me funciona siempre y cuando le ponga 3 números distintos. Estos es debido a que en el bucle
Código
  1.  for (x; x < cont; x++) // valor primer input...
  2.                         {
  3.                             if (cont == v1) document.write("<td bgcolor=\"" + fons1 + "\"></td>")
  4.                             else if (cont == v2) document.write("<td bgcolor=\"" + fons2 + "\"></td>")
  5.                             else if (cont == v3) document.write("<td bgcolor=\"" + fons3 + "\"></td>")    
  6.                         }
siempre se queda en la primera condición y por eso lo pinta todo del mismo color. Por lo tanto podrías crear una variable que opere dentro de un rango desde 1 a 3 para seleccionar cada uno de los distintos valores y con ella determinar dentro de qué sentencia condicional debe entrar.

Por otro lado no se si pretendes hacer una tabla de forma cuadrada o rectangular o la forma te da igual, pero en el caso de querer hacer un cuadrado deberías modificar el valor de "j" dentro del bucle que crea las celdas.


Esta es una posible solución en la que a lo primero que te he dicho en la que te ahorras las variables v1, v2, v3 y gran
Código
  1. function crearTaula()
  2.             {
  3.                 var fons1 = document.getElementById("color1").value;
  4.                 var fons2 = document.getElementById("color2").value;
  5.                 var fons3 = document.getElementById("color3").value;
  6.                 var val1 = document.getElementById("valor1").value;
  7.                 var val2 = document.getElementById("valor2").value;
  8.                 var val3 = document.getElementById("valor3").value;
  9.                 var cont = 0;
  10.                 document.write("<table>");
  11.                 for (i = 0; i < 20; i++) // per generar files
  12.                 {
  13.                     document.write("<tr>");
  14.                     for (j = 0; j < 20;  j++) // per generar cel·les 
  15.                     {
  16.                         cont=cont%3+1;
  17.                             if (cont == 1) {for (x=0; x < val1; x++) {document.write("<td bgcolor=\"" + fons1 + "\"></td>")}
  18.                             }else if (cont == 2){for (x=0; x < val2; x++) { document.write("<td bgcolor=\"" + fons2 + "\"></td>")}
  19.                             }else if (cont == 3){for (x=0; x < val3; x++) { document.write("<td bgcolor=\"" + fons3 + "\"></td>")}}
  20.                     }
  21.                     document.write("</tr>");
  22.                 }
  23.                 document.write("</table>");
  24.             }

Un saludo.


« Última modificación: 1 Octubre 2013, 14:30 pm por Almapa » En línea
Dawman

Desconectado Desconectado

Mensajes: 16


Ver Perfil
Re: javascript
« Respuesta #2 en: 2 Octubre 2013, 13:10 pm »
Almapa,
Moltes gràcies per la teva resposta...
Ara bien, continua habiendo problema a la hora de controlar las celdas...  no se limita a dibujar 20 celdas, sino se pasa de largo saltando la condicion de j<20!!

con la tuya van 4 versiones sin poder con el mismo problema!!
hay alguna otra forma para que no dibuje mas de 20 celdas??
gracias

PD: procuraré poner comentarios en castellano ;P
En línea
Dawman

Desconectado Desconectado

Mensajes: 16


Ver Perfil
Re: javascript
« Respuesta #3 en: 2 Octubre 2013, 13:25 pm »

Almapa,
Moltes gràcies per la teva resposta...
Ara bien, continua habiendo problema a la hora de controlar las celdas...  no se limita a dibujar 20 celdas, sino se pasa de largo saltando la condicion de j<20!!

con la tuya van 4 versiones sin poder con el mismo problema!!
hay alguna otra forma para que no dibuje mas de 20 celdas??
gracias

PD: procuraré poner comentarios en castellano ;P
Código
  1.  
Cita de: nouaman en  2 Octubre 2013, 13:10 pm
function crearTaula()
            {
                var fons1 = document.getElementById("color1").value;
                var fons2 = document.getElementById("color2").value;
                var fons3 = document.getElementById("color3").value;
                var val1 = document.getElementById("valor1").value;
                var val2 = document.getElementById("valor2").value;
                var val3 = document.getElementById("valor3").value;
                var cont = 0;
                document.write("<table>");
                for (i = 0; i < 20; i++) // per generar files
                {
                    document.write("<tr>");
                    for (j = 0; j < 20;  j) // per generar cel·les
                    {
                        cont=cont%3+1;
                        if (cont == 1)
                            {
                                for (x = 0; x < val1; x++)
                                {
                                    document.write("<td bgcolor=\"" + fons1 + "\"></td>")
                                    j++;
                                    if (j >= 20) break;
                                }
                            }
                        else if (cont == 2)
                            {
                                for (x = 0; x < val2; x++)
                                {
                                    document.write("<td bgcolor=\"" + fons2 + "\"></td>")
                                    j++;
                                    if (j >= 20) break;
                                }
                            }
                        else if (cont == 3)
                            {
                                for (x = 0; x < val3; x++)
                                {
                                    document.write("<td bgcolor=\"" + fons3 + "\"></td>")
                                    j++;
                                    if (j >= 20) break;
                                }
                            }
                       
                           
                    }
                    document.write("</tr>");
                }
                document.write("</table>");
Con este codigo me dibuja las 20 celdas, pero no respeta la sequencia de los colores:
por ejemplo: si el usario introduce rojo 3, naranja 2, amarillo 1 la sequencia tiene q seguir siempre 3,2,1... 3,2,1... no se si m'explico bien!!
En línea
Almapa

Desconectado Desconectado

Mensajes: 111


Ver Perfil
Re: javascript
« Respuesta #4 en: 2 Octubre 2013, 14:21 pm »
A mi m'és igual l'idioma jeje ;)

Bueno esto a mi me funciona bien, mira a ver que opinas, he tenido que cambiar la estructura de los bucles y condicionales, pero creo que es lo que andas buscando.

Código
  1. function crearTaula()
  2.             {
  3.                 var fons1 = document.getElementById("color1").value;
  4.                 var fons2 = document.getElementById("color2").value;
  5.                 var fons3 = document.getElementById("color3").value;
  6.                 var val1 = document.getElementById("valor1").value;
  7.                 var val2 = document.getElementById("valor2").value;
  8.                 var val3 = document.getElementById("valor3").value;
  9.                 var cont = 0;
  10. 	var i=1;
  11. 	var j=0;
  12.                 document.write("<table>");
  13. 	while(i<21){
  14. 		cont=cont%3+1;
  15. 		if (cont == 1) {
  16. 			for (x=0; x < val1; x++) {
  17. 				if (j<20){
  18. 					document.write("<td bgcolor=\"" + fons1 + "\"></td>");
  19. 					j++;
  20. 				}else if(j>=20 && i<20){
  21. 					document.write("</tr><tr><td bgcolor=\"" + fons1 + "\"></td>");
  22. 					j=1;
  23. 					i++;
  24. 				}else{i++;break;}
  25. 			}
  26. 		}else if(cont == 2) {
  27. 			for (x=0; x < val2; x++) {
  28. 				if (j<20){
  29. 					document.write("<td bgcolor=\"" + fons2 + "\"></td>");
  30. 					j++;
  31. 				}else if(j>=20 && i<20){
  32. 					document.write("</tr><tr><td bgcolor=\"" + fons2 + "\"></td>");
  33. 					j=1;
  34. 					i++;
  35. 				}else{i++;break;}
  36. 			}
  37. 		}else if(cont == 3) {
  38. 			for (x=0; x < val3; x++) {
  39. 				if (j<20){
  40. 					document.write("<td bgcolor=\"" + fons3 + "\"></td>");
  41. 					j++;
  42. 				}else if(j>=20 && i<20){
  43. 					document.write("</tr><tr><td bgcolor=\"" + fons3 + "\"></td>");
  44. 					j=1;
  45. 					i++;
  46. 				}else{i++;break;}
  47. 			}
  48. 		}else{alert("error");break;}
  49. 	}
  50.           }
En línea
Dawman

Desconectado Desconectado

Mensajes: 16


Ver Perfil
Re: javascript
« Respuesta #5 en: 2 Octubre 2013, 19:19 pm »
Muchas gracias Alampa!!
justo lo que buscaba!! ahora sí que funciona!!

Molts mercis!
En línea
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
javascript --> PHP ó PHP --> javascript
PHP 		Blue_box 2 3,728 Último mensaje 3 Febrero 2006, 00:18 am
por Blue_box
Ayuda con javascript en mi web(no tengo ni idea de javascript)
Desarrollo Web 		jonathanmr 1 3,129 Último mensaje 1 Febrero 2013, 06:14 am
por Shell Root
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines