I'm doing a little game of a drawing palette working with the JavaScript DOM. I want to click on each div with a background color, select that color.
I do not know what I'm doing wrong, because when I access the property style.backgroundColor , it does not return any value, how can I access the backgroundColor of the div I click on?
My code is as follows, you can run it to see what I say. I show it in some "alert" so that it is better understood.
function generarLienzo(){
var cuerpo=document.getElementsByTagName("body")[0];
var contenedor=document.createElement("div");
//TITULO
contenedor.setAttribute("id","contenedor");
var titulo=document.createElement("h1");
var textoTitulo=document.createTextNode("Tablero de Dibujo");
var textoClic=document.createTextNode("Haga CLICK en un color para empezar a dibujar");
titulo.appendChild(textoTitulo);
contenedor.appendChild(titulo);
contenedor.appendChild(textoClic);
//PALETA
var paleta=document.createElement("div");
paleta.setAttribute("id","paleta");
for (var i = 1; i < 7; i++) {
var color=document.createElement("div");
color.setAttribute("id","color"+i);
color.setAttribute("class","color");
color.addEventListener("click",function(){
quitarSeleccionado();
this.className+=" seleccionado";
var seleccion=document.getElementById("seleccionar");
//Aquí tengo el fallo, no sé cómo recoger backgroundColor
var elemseleccionado = document.getElementsByClassName("seleccionado")[0];
alert("Se ha seleccionado "+elemseleccionado);
alert("Se ha seleccionado "+elemseleccionado.style.backgroundColor);
alert(color.style.backgroundColor);
seleccion.style.backgroundColor=color.style.backgroundColor;
});
paleta.appendChild(color);
}
var parrafo2=document.createElement("p");
parrafo2.innerHTML="Estado del pincel:<span id='seleccionar' >Sin Seleccionar</span>";
contenedor.appendChild(parrafo2);
//TABLA
var tabla=document.createElement("table");
tabla.setAttribute("class","zonadibujo");
var fila=document.createElement("tr");
fila.setAttribute("class","filadibujo");
for (var i = 0; i < 960; i++) {
var celda=document.createElement("td");
celda.setAttribute("class","celdadibujo");
fila.appendChild(celda);
}
for (var i = 0; i < 40; i++) {
tabla.appendChild(fila);
}
paleta.appendChild(tabla);
contenedor.appendChild(paleta);
cuerpo.appendChild(contenedor);
}
//EVENTOS
function quitarSeleccionado(){
var cajasColores= document.getElementsByClassName("color");
for (var i = 0; i < cajasColores.length; i++) {
cajasColores[i].classList.remove("seleccionado");//para quitar la clase,sin quitar las demas
//cajasColores[i].setAttribute("class","color");
}
}
window.onload=function(){
generarLienzo();
var contenedor=document.getElementById("contenedor");
}@font-face{
font-family: Roboto;
src:url("fonts/Roboto-Regular.ttf");
}
*{
box-sizing: border-box;
}
html{
height:100%;
}
body{
font-family: Roboto;
background-image:url("img/brush.jpg");
margin:0px;
height: 100%;
}
h1{
margin-top:0px;
}
/* Contenedor del tablero */
#contenedor{
width:600px;
text-align:center;
margin:0 auto;
background-color:#D6D6D6;
border-left:5px solid black;
border-right:5px solid black;
padding-top:10px;
padding-bottom:10px;
}
/* Contiene la paleta de color */
#paleta{
margin:0 auto;
}
/* Clase común a cada caja de color */
.color{
width: 80px;
height: 50px;
display:inline-block;
margin-left:10px;
border:medium solid transparent;
}
/* Ids correspondientes a cada uno de los colores */
#color1 {
background-color: #F00;
}
#color2 {
background-color: #0F0;
}
#color3 {
background-color: #00F;
}
#color4 {
background-color: #FF0;
}
#color5 {
background-color: #0FF;
}
#color6 {
background-color: #FFF;
}
/* Paleta de color seleccionada */
.seleccionado{
border: 5px solid #000000;
}
/* Tablero de dibujo */
.zonadibujo{
display:inline-block;
}
/* Cada fila del tablero de dibujo */
.filadibujo{
margin:0px;
padding:0px;
height:12px;
}
/* Cada celda del tablero de dibujo */
.celdadibujo {
width: 10px;
height:10px;
margin: 1px;
padding: 0px;
background-color:white;
display:inline-block;
}