Unable to add css property to <td> element by clicking on it [duplicate]

Question

I am trying to build a pixel marker webpage for a project. It is almost completed. I am facing a couple of problems:

1. Unable to fill in the color, when a <td> tag is clicked.

2. The wells that contain the color options and the input value to the grid, over flow the vertical line when I resize the browser. I need the width tag here because I want it to fill 100% of the column size it is located in. I had to use a hard coded value here because if I use 100% as the width value, the wells fill the entire width of the window when the browser is resized.

PLease refer to the output here: https://codepen.io/gauravthantry/pen/LdbxZg.

Note:- I just got a notification saying that this question is a duplicate of Difference between .on('click') vs .click()

The question asked in the above post is the answer to my question.

Below is my code:

$(document).ready(function() {
    $("#grid-input").click(function() {
        $(".drawing-area").empty();

        var rows = $("#row").val();
        var cols = $("#col").val();
        if (rows > 0 && cols > 0) {
            if (rows < 8 || cols < 8) {
                for (var i = 1; i <= rows; i++) {
                    var rowClassName = 'row' + i;
                    var tr = $('<tr>').addClass(rowClassName);
                    tr.appendTo('.drawing-area'); //Adding dynamic class names whenever a new table row is created

                    for (var j = 1; j <= cols; j++) {
                        var colClassName = 'col' + j;
                        $('<td width="30px" height="30px" style="border: 1px solid #000; "></a></td>').addClass(colClassName).appendTo(tr);
                    }
                    $('.drawing-area').append('</tr>');

                }
                $('.drawing-area').css('visibility', 'visible').hide().fadeIn('slow');



            } else if ((rows >= 8 && rows <= 20) && (cols >= 8 && cols <= 50)) {
                for (var i = 1; i <= rows; i++) {
                    var rowClassName = 'row' + i;
                    var tr = $('<tr>').addClass(rowClassName);
                    tr.appendTo('.drawing-area'); //Adding dynamic class names whenever a new table row is created

                    for (var j = 1; j <= cols; j++) {
                        var colClassName = 'col' + j;
                        $('<td width="20px" height="20px" style="border: 1px solid #000; text-align: center;"></a></td>').addClass(colClassName).appendTo(tr);
                    }

                }
                $('.drawing-area').css('visibility', 'visible').hide().fadeIn('slow');


            } else if (rows > 20 || cols > 50) {
                alert('Bamm!!! Your input will flood the browser\'s belly');
            }
        } else {
            alert("You haven't provided the grid size!");
        }
    });
    $('td').click(function() {
        var color = $("input[name='color']:checked").val();
		concole.log(color);
        if (color === 'blue') {
            if ($(this).hasClass('colorFill-Blue'))
                $(this).removeClass('colorFill-Blue');
            else
                $(this).addClass('colorFill-Blue');

        } else if (color === 'green') {
            if ($(this).hasClass('colorFill-Green'))
                $(this).removeClass('colorFill-Green');
            else
                $(this).addClass('colorFill-Green');
            alert("green is selected");
        } else {
            if ($(this).hasClass('colorFill-Yellow'))
                $(this).removeClass('colorFill-Yellow');
            else
                $(this).addClass('colorFill-Yellow');
        }
    });
});

.page-position{
    background-image: url("https://i.pinimg.com/originals/f8/03/50/f8035042eda4eaeac4013e4f79ed85b2.jpg");
    width:100%;
    height: 100%;
    
}

.content-position{
    background-color: rgba(255,255,255,0.6); 
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 2%;
    height: 600px;
    width: 96%;
	position: absolute;
}

.heading{
    text-align: center;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    padding-top: 10px;
}

.fa1{
    color: blue;
}
.fa2{
    color: yellow;
}
.fa3{
    color: green;
}

.vertical-line{
    border-left: 1px solid white;
    height: 478px;
	margin-left: 30px;
}

.color-option-container{
    width: 300px;
    background-color: rgba(255,255,255,0.4);
	
}



.grid-size-container{
    background-color: rgba(255,255,255,0.4);
	width: 300px;
    
	
}

.text-line{
    border: none;
    border-bottom: 1px solid;
    width: 30%;
    margin-bottom: 10px;
    background: transparent;
}

.rows{
    float: left;
}

.cols{
    float: center;
    margin-left: 20px;
}

.drawing-area{
    text-align: center;
	visibility: hidden;
}

.btn-size{
	text-align: center;
width: 60px;
}

.colorFill-Blue{
	background-color: blue;
}
.colorFill-Green{
	background-color: green;
}

.colorFill-Yellow{
	background-color: yellow;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <title>PIXEL ART MAKER</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="js/app.js"></script>
</head>

<body class="page-position">
    <!-- Content starts here -->
    <section class="content-position container-fluid">
        <section class="heading">
            <h1><i class="fa fa-fire-extinguisher fa1"></i> DRAW THE PIXELS</h1>
        </section>
        <hr>
        <section>
            <section class="row-fluid">
                <section class="col-md-3">
                    <section class="well well-lg color-option-container">
                        <form class="color-select">
                            <input type="radio" name="color" value="blue" id="blue" checked><i class="fa fa-fire-extinguisher fa1"></i>&nbsp; BLUE
                            <br>
                            <input type="radio" name="color" value="yellow" id="yellow"><i class="fa fa-fire-extinguisher fa2"></i> &nbsp;YELLOW
                            <br>
                            <input type="radio" name="color" value="green" id="green"><i class="fa fa-fire-extinguisher fa3"></i> &nbsp;GREEN
                        </form>
                    </section>
                    <br>
                    <section class="well well-lg grid-size-container">

                        <input type="text" class="text-line rows" id="row" placeholder="Rows">

                        <input type="text" class="text-line cols" id="col" placeholder="Cols">
                        <br/>

                        <button type="submit" class="btn-size btn btn-block btn-primary" id="grid-input"><i class="fa fa-th-large" aria-hidden="true"></i></button>

                    </section>

                </section>
                <section class="col-md-1 vertical-line"></section>
                <section class="col-md-7">
                    <table class="drawing-area">

                    </table>
                </section>
            </section>
        </section>
    </section>

</body>

</html>

Answer 1

Because your elements are dynamically created, you need to attach the click event handler to an element that is available on page load, and make use of event delegation. Instead of $('td').click(), you're looking for $('body').on("click", "td", function() {} ).

Also note that in addition to this, your concole.log should be console.log.

I've corrected this in the following example:

$(document).ready(function() {
  $("#grid-input").click(function() {
    $(".drawing-area").empty();

    var rows = $("#row").val();
    var cols = $("#col").val();
    if (rows > 0 && cols > 0) {
      if (rows < 8 || cols < 8) {
        for (var i = 1; i <= rows; i++) {
          var rowClassName = 'row' + i;
          var tr = $('<tr>').addClass(rowClassName);
          tr.appendTo('.drawing-area'); //Adding dynamic class names whenever a new table row is created

          for (var j = 1; j <= cols; j++) {
            var colClassName = 'col' + j;
            $('<td width="30px" height="30px" style="border: 1px solid #000; "></a></td>').addClass(colClassName).appendTo(tr);
          }
          $('.drawing-area').append('</tr>');

        }
        $('.drawing-area').css('visibility', 'visible').hide().fadeIn('slow');



      } else if ((rows >= 8 && rows <= 20) && (cols >= 8 && cols <= 50)) {
        for (var i = 1; i <= rows; i++) {
          var rowClassName = 'row' + i;
          var tr = $('<tr>').addClass(rowClassName);
          tr.appendTo('.drawing-area'); //Adding dynamic class names whenever a new table row is created

          for (var j = 1; j <= cols; j++) {
            var colClassName = 'col' + j;
            $('<td width="20px" height="20px" style="border: 1px solid #000; text-align: center;"></a></td>').addClass(colClassName).appendTo(tr);
          }

        }
        $('.drawing-area').css('visibility', 'visible').hide().fadeIn('slow');


      } else if (rows > 20 || cols > 50) {
        alert('Bamm!!! Your input will flood the browser\'s belly');
      }
    } else {
      alert("You haven't provided the grid size!");
    }
  });
  $('body').on("click", "td", function() {
    var color = $("input[name='color']:checked").val();
    console.log(color);
    if (color === 'blue') {
      if ($(this).hasClass('colorFill-Blue'))
        $(this).removeClass('colorFill-Blue');
      else
        $(this).addClass('colorFill-Blue');

    } else if (color === 'green') {
      if ($(this).hasClass('colorFill-Green'))
        $(this).removeClass('colorFill-Green');
      else
        $(this).addClass('colorFill-Green');
      alert("green is selected");
    } else {
      if ($(this).hasClass('colorFill-Yellow'))
        $(this).removeClass('colorFill-Yellow');
      else
        $(this).addClass('colorFill-Yellow');
    }
  });
});

.page-position {
  background-image: url("https://i.pinimg.com/originals/f8/03/50/f8035042eda4eaeac4013e4f79ed85b2.jpg");
  width: 100%;
  height: 100%;
}

.content-position {
  background-color: rgba(255, 255, 255, 0.6);
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 2%;
  height: 600px;
  width: 96%;
  position: absolute;
}

.heading {
  text-align: center;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  padding-top: 10px;
}

.fa1 {
  color: blue;
}

.fa2 {
  color: yellow;
}

.fa3 {
  color: green;
}

.vertical-line {
  border-left: 1px solid white;
  height: 478px;
  margin-left: 30px;
}

.color-option-container {
  width: 300px;
  background-color: rgba(255, 255, 255, 0.4);
}

.grid-size-container {
  background-color: rgba(255, 255, 255, 0.4);
  width: 300px;
}

.text-line {
  border: none;
  border-bottom: 1px solid;
  width: 30%;
  margin-bottom: 10px;
  background: transparent;
}

.rows {
  float: left;
}

.cols {
  float: center;
  margin-left: 20px;
}

.drawing-area {
  text-align: center;
  visibility: hidden;
}

.btn-size {
  text-align: center;
  width: 60px;
}

.colorFill-Blue {
  background-color: blue;
}

.colorFill-Green {
  background-color: green;
}

.colorFill-Yellow {
  background-color: yellow;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>PIXEL ART MAKER</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="js/app.js"></script>
</head>

<body class="page-position">
  <!-- Content starts here -->
  <section class="content-position container-fluid">
    <section class="heading">
      <h1><i class="fa fa-fire-extinguisher fa1"></i> DRAW THE PIXELS</h1>
    </section>
    <hr>
    <section>
      <section class="row-fluid">
        <section class="col-md-3">
          <section class="well well-lg color-option-container">
            <form class="color-select">
              <input type="radio" name="color" value="blue" id="blue" checked><i class="fa fa-fire-extinguisher fa1"></i>&nbsp; BLUE
              <br>
              <input type="radio" name="color" value="yellow" id="yellow"><i class="fa fa-fire-extinguisher fa2"></i> &nbsp;YELLOW
              <br>
              <input type="radio" name="color" value="green" id="green"><i class="fa fa-fire-extinguisher fa3"></i> &nbsp;GREEN
            </form>
          </section>
          <br>
          <section class="well well-lg grid-size-container">

            <input type="text" class="text-line rows" id="row" placeholder="Rows">

            <input type="text" class="text-line cols" id="col" placeholder="Cols">
            <br/>

            <button type="submit" class="btn-size btn btn-block btn-primary" id="grid-input"><i class="fa fa-th-large" aria-hidden="true"></i></button>

          </section>

        </section>
        <section class="col-md-1 vertical-line"></section>
        <section class="col-md-7">
          <table class="drawing-area">

          </table>
        </section>
      </section>
    </section>
  </section>

</body>

</html>

Answer 2

CodePen

Two things:

1. Your td elements are dynamically created, but your code uses $("td").click(…) which only binds to the TD elements at the time that is called. Instead of binding an event on the existing TDs, a simpler and more efficient fix is to bind the event to a more static ancestor. The table element is a static ancestor, so changing your click definition to $('table').on('click','td',function(){...}) will ensure that the dynamic TDs are included.
   
   This means when you click anywhere in the table, the function will see if the target was a td and if so it will call the included function.
2. You had an error in the code, where what should have been console was spelled concole.

I've fixed both of these below:

$(document).ready(function() {
  $("#grid-input").click(function() {
    $(".drawing-area").empty();

    var rows = $("#row").val();
    var cols = $("#col").val();
    if (rows > 0 && cols > 0) {
      if (rows < 8 || cols < 8) {
        for (var i = 1; i <= rows; i++) {
          var rowClassName = "row" + i;
          var tr = $("<tr>").addClass(rowClassName);
          tr.appendTo(".drawing-area"); //Adding dynamic class names whenever a new table row is created

          for (var j = 1; j <= cols; j++) {
            var colClassName = "col" + j;
            $(
                '<td width="30px" height="30px" style="border: 1px solid #000; "></a></td>'
              )
              .addClass(colClassName)
              .appendTo(tr);
          }
          $(".drawing-area").append("</tr>");
        }
        $(".drawing-area")
          .css("visibility", "visible")
          .hide()
          .fadeIn("slow");
      } else if (rows >= 8 && rows <= 20 && (cols >= 8 && cols <= 50)) {
        for (var i = 1; i <= rows; i++) {
          var rowClassName = "row" + i;
          var tr = $("<tr>").addClass(rowClassName);
          tr.appendTo(".drawing-area"); //Adding dynamic class names whenever a new table row is created

          for (var j = 1; j <= cols; j++) {
            var colClassName = "col" + j;
            $(
                '<td width="20px" height="20px" style="border: 1px solid #000; text-align: center;"></a></td>'
              )
              .addClass(colClassName)
              .appendTo(tr);
          }
        }
        $(".drawing-area")
          .css("visibility", "visible")
          .hide()
          .fadeIn("slow");
      } else if (rows > 20 || cols > 50) {
        alert("Bamm!!! Your input will flood the browser's belly");
      }
    } else {
      alert("You haven't provided the grid size!");
    }
  });
  $("table").on('click', 'td', function() {
    var color = $("input[name='color']:checked").val();
    console.log(color);
    if (color === "blue") {
      if ($(this).hasClass("colorFill-Blue"))
        $(this).removeClass("colorFill-Blue");
      else $(this).addClass("colorFill-Blue");
    } else if (color === "green") {
      if ($(this).hasClass("colorFill-Green"))
        $(this).removeClass("colorFill-Green");
      else $(this).addClass("colorFill-Green");
      alert("green is selected");
    } else {
      if ($(this).hasClass("colorFill-Yellow"))
        $(this).removeClass("colorFill-Yellow");
      else $(this).addClass("colorFill-Yellow");
    }
  });
});

.page-position {
  background-image: url("https://i.pinimg.com/originals/f8/03/50/f8035042eda4eaeac4013e4f79ed85b2.jpg");
  width: 100%;
  height: 100%;
}

.content-position {
  background-color: rgba(255, 255, 255, 0.6);
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 2%;
  height: 600px;
  width: 96%;
  position: absolute;
}

.heading {
  text-align: center;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  padding-top: 10px;
}

.fa1 {
  color: blue;
}

.fa2 {
  color: yellow;
}

.fa3 {
  color: green;
}

.vertical-line {
  border-left: 1px solid white;
  height: 478px;
  margin-left: 30px;
}

.color-option-container {
  width: 300px;
  background-color: rgba(255, 255, 255, 0.4);
}

.grid-size-container {
  background-color: rgba(255, 255, 255, 0.4);
  width: 300px;
}

.text-line {
  border: none;
  border-bottom: 1px solid;
  width: 30%;
  margin-bottom: 10px;
  background: transparent;
}

.rows {
  float: left;
}

.cols {
  float: center;
  margin-left: 20px;
}

.drawing-area {
  text-align: center;
  visibility: hidden;
}

.btn-size {
  text-align: center;
  width: 60px;
}

.colorFill-Blue {
  background-color: blue;
}

.colorFill-Green {
  background-color: green;
}

.colorFill-Yellow {
  background-color: yellow;
}

<html lang="en">

<head>
  <title>PIXEL ART MAKER</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="js/app.js"></script>
</head>

<body class="page-position">
  <!-- Content starts here -->
  <section class="content-position container-fluid">
    <section class="heading">
      <h1><i class="fa fa-fire-extinguisher fa1"></i> DRAW THE PIXELS</h1>
    </section>
    <hr>
    <section>
      <section class="row-fluid">
        <section class="col-md-3">
          <section class="well well-lg color-option-container">
            <form class="color-select">
              <input type="radio" name="color" value="blue" id="blue" checked><i class="fa fa-fire-extinguisher fa1"></i>&nbsp; BLUE
              <br>
              <input type="radio" name="color" value="yellow" id="yellow"><i class="fa fa-fire-extinguisher fa2"></i> &nbsp;YELLOW
              <br>
              <input type="radio" name="color" value="green" id="green"><i class="fa fa-fire-extinguisher fa3"></i> &nbsp;GREEN
            </form>
          </section>
          <br>
          <section class="well well-lg grid-size-container">

            <input type="text" class="text-line rows" id="row" placeholder="Rows">

            <input type="text" class="text-line cols" id="col" placeholder="Cols">
            <br/>

            <button type="submit" class="btn-size btn btn-block btn-primary" id="grid-input"><i class="fa fa-th-large" aria-hidden="true"></i></button>

          </section>

        </section>
        <section class="col-md-1 vertical-line"></section>
        <section class="col-md-7">
          <table class="drawing-area">

          </table>
        </section>
      </section>
    </section>
  </section>

</body>

</html>