如何向HTML表格单元格添加唯一命名的JavaScript函数

Question

I have a Sudoku table which I've generated using JavaScript. After generating the table, I've also attached a number entry field as well as a function to each cell. Currently, the function passes in only the very last cell id that was generated (ex. R9C9), not the cell that was recently modified. I would rather have the function get passed the current cell id which the user modified so that I can check the row, column, and current square for conflicts and not every single cell on the board. I'm trying not to use jQuery, but any help would be appreciated.

This is the code that attaches the number field, as well as the function. I believe currently the function it attaches is anonymous, which wouldn't matter as long as I could get the attached anonymous function to be associated with the current cell.

for (i = 1; i <=9; i++)
{
    for (j = 1; j <= 9; j++) {
        temp = document.getElementById('R'+i+'C'+j);
        if (temp.innerHTML == "")
        {
            var temp2 = temp.appendChild(document.createElement("input"));
            temp2.type = "number";
            temp3 = document.getElement('R'+i+'C'+j);
            temp2.onkeyup = function(){conflictChecker(temp3)};
        }
    }
}

This is the code for generating the table. function makeGrid(x, y, name) {

var tableDiv = document.getElementById("gameTable");
var table = document.createElement('table');
table.id = "theTable";



table.style.width = '100px';
table.style.border = 'thick solid black';

for (var i = 1; i <= x; i++) {
    var row = table.insertRow();
    row.id = "Row" + i;

    for (var j = 1; j <= y; j++) {
        var cell = row.insertCell();
        cell.id = "R" + i + "C" + j;
        cell.classList.add();
        cell.style.border = '1px solid';
        if((i%3) == 0)
        {
            cell.style.borderBottom = "thick solid black";
        }
        if(((j-1)%3) == 0)
        {
            cell.style.borderLeft = "thick solid black";
        }

    }



}
tableDiv.appendChild(table)

The original elements of the table I add using so the user cannot modify them.

document.getElementById("R_C_").innerHTML = "someNumber";

I tried taking the assingment of the functions out of the orinal function by adding this

for (i =1; i <= 9; i++) {

for (j = 1; j <= 9; j++) {
    temp = document.getElementById('R' + i + 'C' + j);
    temp.onkeyup = function(){conflictChecker(temp)};
}

}

Any help would be immensely appreciated. I've tried several different types of syntax, but they don't seem to be working.

Answer 1

What's happening is that the javascript is not computing the value of temp3 - it's keeping it as a variable until the function is called, and then it computes the value, which will be equal to what it was during the very last iteration...

Did you try this?

temp2.onkeyup = function(){conflictChecker(this.parent)};

Answer 2

I solved my problem. For some reason using the onkeyup function for my event wasn't working. I switched it to onchange() and was able to get the current cell by passing in 'this'

for (i = 1; i <=9; i++)
{
    for (j = 1; j <= 9; j++) {
        temp = document.getElementById('R'+i+'C'+j);
        if (temp.innerHTML == "")
        {
            var temp2 = temp.appendChild(document.createElement("input"));
            temp2.type = "number";
            temp2.id = 'R'+i+'C'+j+'2';
            temp2.onchange = function(){conflictChecker(this)};
        }
        else
        {
            theVal = temp.innerHTML;
            temp.value = theVal;
            temp.id = 'R'+i+'C'+j+'2';
        }
    }
}

I assigned different Id's as well so that I could look up the value of the cell from conflictChecker. Probably not the most elegant solution but it works.