I have a board with a palette of colors that what it does is: You select the color in the palette, click on a cell and paint the selected color that plus all the cells through which the mouse passes. Well, until then everything works. The question I have now is that I want to stop the event with another click, that is, when I click on a cell, stop painting.
My code is as follows:
var elementoTable = document.createElement("tbody");
for (f = 0; f < 30; f++) {
var elementoTR = document.createElement("tr");
for (c = 0; c < 30; c++) {
var elementoTD = document.createElement("td");
elementoTR.appendChild(elementoTD);
}
elementoTable.appendChild(elementoTR);
}
document.getElementById("tablerodibujo").appendChild(elementoTable);
var celdas = document.getElementsByTagName("td");
document.getElementById("color1").addEventListener("click", selec_amarillo, false);
function selec_amarillo() {
document.getElementById("color1").className += "seleccionado";
document.getElementById("pincel").innerHTML = "PINCEL AMARILLO ACTIVADO";
for (var i = 0; i < celdas.length; i++) {
celdas[i].addEventListener("click", click_amarillo, false);
}
}
function click_amarillo() {
this.style.backgroundColor = "#FF0";
for (var i = 0; i < celdas.length; i++) {
celdas[i].addEventListener("mouseover", colorear_amarillo, false);
celdas[i].addEventListener("click", stop_pintar, false);
}
}
function colorear_amarillo() {
this.style.backgroundColor = "#FF0";
}
function stop_pintar() {
return false;
}
#color1 {
background: yellow;
height: 20px;
}
<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 id="color1"></td>
<td id="color2"></td>
<td id="color3"></td>
<td id="color4"></td>
<td id="color5"></td>
<td id="color6"></td>
</tr>
<tr>
<td colspan="6" id="pincel">PINCEL DESACTIVADO</td>
</tr>
</table>
<p></p>
<div id="zonadibujo">
<caption>Haga CLICK en cualquier celda para activar/desactivar el Pincel</caption>
<table id="tablerodibujo"></table>
</div>