Foros del Web - Ver Mensaje Individual

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