The cell does not remain colored.

Question

I created a pixel art creator using jQuery and added functionality to re-enter the default "draw" mode after using the "erase" mode. It works to color multiple cells, but my code for coloring a single cell does not work.

If you:

• Use the fill button to fill the grid with color
• Click "erase" and delete one cell
• Click draw and try to color the erased cell.

The cell is filled with color for a second of a second, and then cleared again. However, if you simply press the drawing mode after loading the page and click on the cell, it will be colored in normal mode.

Here is the code I used (part of another function). To view my full code / see how it works, you can view CodePen .

  $('td').click(function() {
  // Adds chosen color to cell upon a click event. Selector 'this' refers to cell (with class 'Cell') being clicked. Variable 'color' is defined here rather than globally so JS checks whether a new color has been picked before each mousedown event
    const color = $('.color-picker').val();
    $(this).css('background-color', color);
  });

Answer 1

You need to disable features such as

$(pixelCanvas).on('click', 'td', function() {
  $(this).removeAttr('style');
});

when the tool is eraseoff.

Answer 2

Each time the mode changes, you add listeners and never delete the previous ones, so, for example, you could mousedown by causing the window to draw, and immediately call the handler that erases the box.

You should try to reorganize your code so that previous listeners are deleted when the mode changes.

Answer 3

var color=""; 
var type=0;
$(function()
{
	$("tr td").css({"width":"100px","cursor":"pointer"});	
	
});
$("document").ready(function()
{
	$("td").click( function()
    {
		if(type==1)
			$(this).css("background-color","");
		else if(type==2)
			$(this).css("background-color",color);
	});
	
	$("#txtColor").click( function()
    {
		setP();
	});
	
	$("#txtColor").change( function()
	{
		color=$(this).val();
		setP();
	});
	$("#btnR").click( function()
    {
		type=1;
		setP();
	});
	$("#btnD").click( function()
    {
		type=2;
		setP();
	});
	
});
function setP()
{
	var text="";
	if(color.length>0)
		text+="Current Select Color : "+color;
	else
		text+="Select Color";
	
	text+="<br>";
	
	if(type==1)
		text+="Select Earase";
	else if(type==2)	
		text+="Select Draw";
		
		
	$("p").html(text);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div align="center">
<p></p>
<table border="1">
    <tr>
        <td>00 click here</td>
        <td>01 click here</td>
    </tr>
    <tr>
        <td>10 click here</td>
        <td>11 click here</td>
    </tr>
    <tr>
        <td>20 click here</td>
        <td>21 click here</td>
    </tr>
    <tr>
        <td>30 click here</td>
        <td>31 click here</td>
    </tr>
    <tr>
        <td>40 click here</td>
        <td>41 click here</td>
    </tr>
    <tr>
        <td>50 click here</td>
        <td>51 click here</td>
    </tr>
</table>


	<input id="txtColor" type="color">
    <input id="btnR" type="button" value="earase">
    <input id="btnD" type="button" value="draw">

</div>

Run codeHide result