Foro de elhacker.net

Programación => Scripting => Mensaje iniciado por: Dawman en 30 Septiembre 2013, 23:03 pm


Título: javascript
Publicado por: Dawman 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


Título: Re: javascript
Publicado por: Almapa 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.

Título: Re: javascript
Publicado por: Dawman 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

Título: Re: javascript
Publicado por: Dawman 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!!

Título: Re: javascript
Publicado por: Almapa 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.           }

Título: Re: javascript
Publicado por: Dawman en 2 Octubre 2013, 19:19 pm
Muchas gracias Alampa!!
justo lo que buscaba!! ahora sí que funciona!!

Molts mercis!


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines