Tablero de dibujo javascript

delarosan1 · #1 (**permalink**) 09/04/2014, 04:37

Hola estoy realizando un tablero de dibujo con javascript, lo que quiero es que cuando pinche a una celda del tablero se coloree, que parte de mi código esta mal? solo se colorea la ultima celda. Muchas gracias.

index.html

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DWEC06 - SOLUCION TAREA</title>
<link type="text/css" rel="stylesheet" href="estilos.css" />


</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" id="color1"> </td>
  		<td class="color2" id="color2"> </td>
  		<td class="color3" id="color3"> </td>
  		<td class="color4" id="color4"> </td>
  		<td class="color5" id="color5"> </td>
  		<td class="color6" id="color6"> </td>
  	</tr>
  	<tr>
  		<td colspan="6" id="pincel">Estado del pincel</td>
  		</tr>
</table>
<p> </p>
<div id="zonadibujo"> </div>
<script type="text/javascript" src="./funciones.js"></script>
</body>
</html>

estilos.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;
}

funciones.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';
};

delarosan1 · #2 (**permalink**) 14/04/2014, 06:50

alguien puede echarme un cable?

Artificium · #3 (**permalink**) 14/04/2014, 07:09

Bueno, yo te recomiendo esto, aquí en este código:

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

Reemplazalo por esto:

listen(td, 'click', function(evt) {evt.target.className = 'color1'});

La función listen en JavaScript no existe, puedes encontrar la explicación y el código de esa función aquí:

http://www.anieto2k.com/2006/10/16/g...en-javascript/

Creo que solo con ese cambio funcionará.