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

Question

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!

abhishekkannojia · Accepted Answer · 2017-07-01 12:42:41Z

3

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

edited Jul 1, 2017 at 12:42

answered Jul 1, 2017 at 12:37

abhishekkannojia

2,86625 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related