[SOLUCIONADO] Tablero de dibujo Javascript

gmp96 · #1 (**permalink**) 03/02/2016, 11:34

Buenas, estoy intentado hacer un tablero de dibujo en javascript, pero no consigo que se seleccionen los colores, solo el amarillo porque esta puesto por defecto. A parte con el amarillo solo se colorea el ultimo cuadro del tablero.
He visto que existe un post igual que este pero el que contesto a la duda no la resuelve S:

¿Alguien me puede ayudar? Gracias

Aquí os dejo los codigos:

HTML

Código:

<!DOCTYPE html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Unidad 6 - Proyecto</title>
	<link type="text/css" rel="stylesheet" href="Unidad6Proyecto.css" />
	<script type="text/javascript" src="Unidad6Proyecto.js"></script>
</head>
<body onload="crearTabla();">
	<p>TABLERO DE DIBUJO EN JAVASCRIPT</p>
	<table width="500" border="1" id="paleta" summary="Tabla de selección de colores">
		  <caption>
			Haga CLICK en un color para comenzar a pintar
		  </caption>
		  <tr>
				<td class="color1 seleccionado"></td>
				<td class="color2"></td>
				<td class="color3"></td>
				<td class="color4"></td>
				<td class="color5"></td>
				<td class="color6"></td>
			</tr>
			<tr>
				<td colspan="6" id="pincel">Estado del pincel</td>
			</tr>
	</table>
	<p></p>
	<div id="zonadibujo"></div>
	</body>
</html>

CSS

Código:

.tablerodibujo {
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	width: auto;
}
.tablerodibujo td {
	width: 10px;
	height:10px;
	margin: 0px;
	padding: 0px;
}
.color1 {
	background-color: #FF0;
}
.color2 {
	background-color: #0F0;
}
.color3 {
	background-color: #000;
}
.color4 {
	background-color: #F00;
}
.color5 {
	background-color: #06C;
}
.color6 {
	background-color: #FFF;
}

#paleta td{
	width: 35px;
	height: 20px;
}

#pincel{
	text-align: center;
}

.seleccionado{
	border: medium solid #939;
}

JS

Código:

function crearTabla(){
		var tablearea = document.getElementById('zonadibujo');
	    table = document.createElement('table');
	    table.className='tablerodibujo';

	for (var i = 0; i < 30; i++) {
	    var tr = document.createElement('tr');
	    for(var j = 0; j < 30; j++){
	    	var td = document.createElement('td');
	    	td.id="obj"+i+j;
	    	
	    	td.style.border ="1px solid #000";
	    	tr.appendChild(td);
	    	td.onclick=function(){td.className = 'color1';};
	    	
	    }
	    table.appendChild(tr);
	}
	tablearea.appendChild(table);
}

document.getElementById('color1').onclick=function(){
	document.getElementById('color1').className = 'color1 seleccionado';
	document.getElementById('color2').className = 'color2';
	document.getElementById('color3').className = 'color3';
	document.getElementById('color4').className = 'color4';
	document.getElementById('color5').className = 'color5';
	document.getElementById('color6').className = 'color6';
};

document.getElementById('color2').onclick=function(){
	document.getElementById('color1').className = 'color1';
	document.getElementById('color2').className = 'color2 seleccionado';
	document.getElementById('color3').className = 'color3';
	document.getElementById('color4').className = 'color4';
	document.getElementById('color5').className = 'color5';
	document.getElementById('color6').className = 'color6';
};

document.getElementById('color3').onclick=function(){
	document.getElementById('color1').className = 'color1';
	document.getElementById('color2').className = 'color2';
	document.getElementById('color3').className = 'color3 seleccionado';
	document.getElementById('color4').className = 'color4';
	document.getElementById('color5').className = 'color5';
	document.getElementById('color6').className = 'color6';
};

document.getElementById('color4').onclick=function(){
	document.getElementById('color1').className = 'color1';
	document.getElementById('color2').className = 'color2';
	document.getElementById('color3').className = 'color3';
	document.getElementById('color4').className = 'color4 seleccionado';
	document.getElementById('color5').className = 'color5';
	document.getElementById('color6').className = 'color6';
};

document.getElementById('color5').onclick=function(){
	document.getElementById('color1').className = 'color1';
	document.getElementById('color2').className = 'color2';
	document.getElementById('color3').className = 'color3';
	document.getElementById('color4').className = 'color4';
	document.getElementById('color5').className = 'color5 seleccionado';
	document.getElementById('color6').className = 'color6';
};

document.getElementById('color6').onclick=function(){
	document.getElementById('color1').className = 'color1';
	document.getElementById('color2').className = 'color2';
	document.getElementById('color3').className = 'color3';
	document.getElementById('color4').className = 'color4';
	document.getElementById('color5').className = 'color5';
	document.getElementById('color6').className = 'color6 seleccionado';
};

gmp96 · #2 (**permalink**) 03/02/2016, 12:35

Por cierto, este seria el enunciado del ejercicio:

Queremos hacer una aplicación en JavaScript que simule un pequeño tablero de dibujo.
El proyecto consistirá en dibujar una tablero de 30 celdas x 30 celdas con cada celda de
ancho 10 px y alto 10 px. Para realizar el tablero de dibujo se tendrá que emplear
obligatoriamente los métodos de creación de nodos del DOM. Una vez generado el
tablero se introducirá dentro de una capa DIV con id "zonadibujo".
La paleta tendrá cinco colores de dibujo. Se te facilitará un fichero .html y un fichero
.css con los estilos que tendrás a utilizar.
La programación de la aplicación JavaScript se realizará en un fichero .js adicional. Se
valorará que la aplicación sea cross-browser y funcione en Firefox, Google Chrome e
Internet Explorer
La forma de funcionamiento de la aplicación será la siguiente:
-Haremos click en alguno de los cinco colores de la paleta y se le asignará la clase
"seleccionado".
-Una vez seleccionado un color de la paleta, haremos un click en una celda (que
se pintará del color activo en la paleta) y desde ese momento al mover el ratón
por el tablero pintará del color activo todas las celdas por las que vayamos
pasando el ratón. En el momento que volvamos a hacer click en otra celda dejará
de pintar.
-Podremos escoger un color diferente y repetir el proceso, incluso sobre celdas
que ya han sido pintadas.
-Para borrar una celda pintaremos con el color blanco de la paleta.
-Cada vez que el pincel esté activado se mostrará un mensaje debajo de la paleta
de colores indicando: PINCEL ACTIVADO o PINCEL DESACTIVADO. Captura de
cómo debería quedar la aplicación:

ZedGe1505 · #3 (**permalink**) 03/02/2016, 12:58

No te haré la tarea xD

pero sí corregí tu problema

Primero le asigne un id al TR de la primera tabla para poder recorrerlo y saltarme el siguiente TR del estado del pincel.

Luego cambie

Código Javascript:

Ver originaltd.onclick=function(){td.className = 'color1';};

por

Código Javascript:

Ver originaltd.className = 'color1';

Queda mucho mas limpio.

Luego eliminé tu código que tanto repetias abajo y lo que hice fue, quitar la clase seleccionado a todos tus colores, dejar la clase selecionado en la celda seleccionada y luego pintar el cuadro.

Código HTML:

Ver original<body onload="crearTabla();">
    <p>TABLERO DE DIBUJO EN JAVASCRIPT</p>
    <table width="500" border="1" id="paleta" summary="Tabla de selección de colores">
          <caption>
            Haga CLICK en un color para comenzar a pintar
          </caption>
          <tr id="color">
                <td class="color1 seleccionado"></td>
                <td class="color2" ></td>
                <td class="color3" ></td>
                <td class="color4" ></td>
                <td class="color5"></td>
                <td class="color6" ></td>
            </tr>
            <tr>
                <td colspan="6" id="pincel">Estado del pincel</td>
            </tr>
    </table>
    <p></p>
    <div id="zonadibujo"></div>
    </body>

Código Javascript:

Ver originalfunction crearTabla(){
        var tablearea = document.getElementById('zonadibujo');
        table = document.createElement('table');
        table.className='tablerodibujo';
 
    for (var i = 0; i < 30; i++) {
        var tr = document.createElement('tr');
        for(var j = 0; j < 30; j++){
            var td = document.createElement('td');
            td.id="obj"+i+j;
            
            td.style.border ="1px solid #000";
            tr.appendChild(td);
            td.className = 'color1';
        }
        table.appendChild(tr);
    }
    tablearea.appendChild(table);
}
 
$("#paleta td").click(function() {
  $('#color').each(function(){
      $(this).find('td').each(function(){
          var myClass = $(this).attr("class");
                myClass = myClass.split(" ");
          if(typeof  myClass[1] != "undefined"){
            $(this).removeClass( 'seleccionado' );    
          }
      })
  })
  
  var newColor = $(this).addClass( 'seleccionado' );   
  
    $('.tablerodibujo').each(function(){
      $(this).find('td').each(function(){
            $(this).removeClass(); 
            $(this).addClass(newColor.attr("class"));
      })
 
   })
  
});

Te dejo la Demo

gmp96 · #4 (**permalink**) 03/02/2016, 14:01

Muchas gracias ZedGe1505, me sirvió para aclararme un poco más. ;)