javascripthtmlcsssudokuzepto

Creating a Sudoku Grid (Javascript and HTML), won't allow input to cells

So I've got my program running, where it creates a sudoku grid, and has a single-row table beneath it, to allow number input.

But, when I click on a number at the bottom and click a cell so that the number can go into the cell, it won't work. (I double clicked, to show that I had clicked it)

I selected 1, and clicked on a cell, wanting a 1 to appear in that cell. But instead, it does nothing.

Here is my HTML:

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Generated Sudoku">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="http://zeptojs.com/zepto.min.js"></script>
    <title>Sudoku Generator</title>
</head>
<body>
    <h1>Sudoku</h1>
    <table id="sudokuTable">
    </table>

    <table>
        <tr>
          <td class="numberSelector">1</td>
          <td class="numberSelector">2</td>
          <td class="numberSelector">3</td>
          <td class="numberSelector">4</td>
          <td class="numberSelector">5</td>
          <td class="numberSelector">6</td>
          <td class="numberSelector">7</td>
          <td class="numberSelector">8</td>
          <td class="numberSelector">9</td>
       </tr>
    </table>

    <button type="button" onclick="createSudokuTable()">New</button>
</body>
</html>

Here is my CSS:

td {
  border:1px solid black;
  width:20px;
  height:20px;
  text-align:center;
  cursor:pointer;
}

.numberSelector {
  background-color:blue;
  color:yellow;
  font-family:Arial,Sans-Serif;
}
.selectedNumber {
  background-color:yellow;
  color:blue;
}

Here is my JavaScript:

function createSudokuTable() {
    var htmlText = '';
    for (var row = 1; row <= 9; row++) {
        htmlText += '<tr>';
        for (var column = 1; column <= 9; column++) {
            htmlText += '<td class="sudokuCell" id="cell_' + row + '_' + column + '">&nbsp;</td>';
        }
        htmlText += '</tr>';
    }
    $('#sudokuTable').html(htmlText);
}
var inputNumber = 1;
function clicked() {
    cellId = this.id;
    if ($('#' + cellId).text() == inputNumber) {
        $('#' + cellId).text('&nbsp;');
    } else {
        $('#' + cellId).text(inputNumber);
    }
}



function selectNumber() {
    inputNumber = this.innerText;
    $('.numberSelector').removeClass('selectedNumber');
    $(this).addClass('selectedNumber');
}

$('.sudokuCell').on('click', clicked);
$('.numberSelector').on('click', selectNumber);

I have used Zepto by the way :)

Any help would be greatly appreciated :) Thanks!

Solution

  • The problem lies in this line: 

    $('.sudokuCell').on('click', clicked);

    You are attaching the handler on click event of the .sudokuCell element which does not exist at the time of page load. You have to delegate the event handling to the nearest parent which exists at the time of event attachment.

    To solve this, make this simple change in your code: 

    $('#sudokuTable').on('click','.sudokuCell', clicked);

    Check the complete functional code here: JSBIN

    Learn more about event delegation here: Understanding Event Delegation