2017-07-01 9 views
1

私のプログラムは実行されています。スードクグリッドが作成され、その下に単一行テーブルがあり、 。私は一番下の番号をクリックすると、番号が細胞内に入ることができるようにセルをクリックしたときに数独グリッド(JavascriptとHTML)を作成すると、セルへの入力が許可されない

しかし、それは動作しません。私は1を選択し、そのセルに表示されるように1を望んで、セルをクリックした

(私はそれをクリックしたことを示すために、ダブルクリック)。しかし代わりに、それは何もしません。ここで

は私の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> 

は私の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; 
} 

は私の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); 

私は道:)

でZeptoを使用していました

どのようなヘルプb電子は非常に感謝:)ありがとう!

答えて

3

問題は、この行にある:あなたは、ページの読み込み時には存在しない.sudokuCell要素のclickイベントにハンドラをアタッチしている

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

イベントの添付時に存在する最も近い親にイベントを委譲する必要があります。ここでは完全な機能コードを確認してください

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

JSBIN

は、ここではイベントの委任の詳細情報:Understanding Event Delegation

、これを解決するため、あなたのコード内でこの単純な変更を行うには

関連する問題